Анимирование встроенных элементов с помощью jQuery

Я пытаюсь показать и скрыть встроенный элемент (например, span) с помощью jQuery.

Если я просто использую toggle(), он работает так, как ожидалось, но если я использую toggle ( "slow" ), чтобы дать ему анимацию, он превратит span в элемент блока и, следовательно, вставляет разрывы.

Возможно ли анимация с встроенными элементами? Я предпочел бы плавное скольжение, если это возможно, вместо того, чтобы затухать.

<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>

Ответы

Ответ 1

toggle() имеет с собой множество странных вещей, включая время от времени скрывая или изменяя нечетные элементы. здесь аналогичное решение:

$('.toggle').click(function() {
  $('.hide').animate({
    'opacity' : 'toggle',
  });
});

edit: здесь можно добавить плавное скольжение с минимальной дополнительной разметкой 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>

Ответ 3

Я не думаю, что это возможно. Единственный способ, который я мог бы сделать, - это оживить его непрозрачность между 0 и 1 и использовать обратный вызов анимации, затем включить или выключить его.

$('.toggle').click(function() {
    $('.hide:visible').animate(
        {opacity : 0},
        function() { $(this).hide(); }
    );
    $('.hide:hidden')
        .show()
        .animate({opacity : 1})
    ;
});

Ответ 4

Как показали другие ответы, возможно замирание. Тем не менее, я не думаю, что "плавное скольжение" будет. Проще говоря, конкретное свойство элемента должно быть анимировано. Встроенный диапазон, как вы упоминаете, не имеет определенной высоты или ширины, хотя он имеет непрозрачность.

Ответ 5

Я не думаю, что то, что вы хотите сделать, возможно до отображения: встроенный блок хорошо поддерживается в браузерах. На данный момент, я думаю, что я увяжу фон с красным, а затем скрою элемент.

Если отображение: встроенный блок хорошо поддерживается, вы можете изменить стиль на встроенный блок, а затем оживить ширину или высоту, но, к сожалению, в наши дни это будет работать не очень хорошо. Может быть, в 2010 году:)

Ответ 6

Тот факт, что 'animate' изменяет то, что он анимирует на элемент блока, не является проблемой, если то, что вы пытаетесь сдвинуть влево или вправо, позиционируется с помощью float: left и все, что рядом с ним, также позиционируется с помощью float: левый

 $('#pnlPopup #btnUpdateButton').assertOne().animate({ width: "toggle" });

если #btnUpdateButton оформлен следующим образом, тогда он скользит довольно хорошо и подталкивает содержимое вправо.

#btnUpdateButton {
    float: left;
    margin-right: 5px;
}