Анимация встроенных элементов с помощью jQuery
Я пытаюсь показать и скрыть встроенный элемент (например, диапазон) с помощью jQuery.
Если я просто использую toggle (), он работает, как ожидалось, но если я использую toggle («медленно») для анимации, он превращает диапазон в элемент блока и, следовательно, вставляет разрывы.
Возможна ли анимация со встроенными элементами? Я бы предпочел плавное скольжение, а не постепенное появление.
<script type = "text/javascript">
$(function(){
$('.toggle').click(function() { $('.hide').toggle("slow") });
});
</script>
<p>Hello <span class = "hide">there</span> jquery</p>
<button class = "toggle">Toggle</button>
Ответы 6
Я не думаю, что это возможно. Единственный способ, которым я мог это сделать, - это анимировать его непрозрачность между 0 и 1 и, используя обратный вызов анимации, затем включить или выключить ее.
$('.toggle').click(function() {
$('.hide:visible').animate(
{opacity : 0},
function() { $(this).hide(); }
);
$('.hide:hidden')
.show()
.animate({opacity : 1})
;
});
toggle() имеет кучу странных вещей, в том числе временами скрытие или преобразование нечетных элементов. вот аналогичное решение:
$('.toggle').click(function() {
$('.hide').animate({
'opacity' : 'toggle',
});
});
редактировать: вот способ добавить плавное скольжение с минимальной дополнительной разметкой HTML:
var hidepos = $('.hide').offset().left;
var slidepos = $('.slide').offset().left;
$('.toggle').click(function() {
var goto = ($('.slide').offset().left < slidepos) ? slidepos : hidepos;
$('.slide').css({
'left' : $('.slide').offset().left,
'position' : 'fixed',
}).animate({
'left' : goto,
}, function() {
$(this).css('position', 'static');
});
$('.hide').animate({
'opacity' : 'toggle',
});
});
html:
<p>Hello <span class = "hide">there</span> <span class = "slide">jquery</span></p>
<button class = "toggle">Toggle</button>
Как показали другие ответы, возможно замирание. Однако не думаю, что «плавное скольжение» будет. Проще говоря, нужно анимировать определенное свойство элемента. Встроенный диапазон, как вы упомянули, не имеет определенной высоты или ширины, хотя у него есть непрозрачность.
Я не думаю, что то, что вы хотите сделать, возможно, пока display: inline-block не будет хорошо поддерживаться во всех браузерах. На данный момент я бы сделал фон красным, а затем скрыл бы элемент.
Если display: inline-block хорошо поддерживался, вы могли бы изменить стиль на inline-block, а затем анимировать ширину или высоту, но, к сожалению, в наши дни это не будет работать очень хорошо. Может в 2010 году :)
Тот факт, что 'animate' изменяет то, что он анимирует в элемент блока, не является проблемой, если то, что вы пытаетесь сдвинуть влево или вправо, позиционируется с помощью float: left, а все, что рядом с ним, также позиционируется с помощью float: left
$('#pnlPopup #btnUpdateButton').assertOne().animate({ width: "toggle" });
если стиль #btnUpdateButton выглядит следующим образом, он довольно хорошо скользит и смещает содержимое вправо.
#btnUpdateButton {
float: left;
margin-right: 5px;
}
Всего одно CSS-свойство вас порадует: http://terion-fallen.livejournal.com/332945.html
#animated-element { display: inline-block!important }
это решение работает так же, как и мое, но, очевидно, намного лучше!