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

Question

Я пытаюсь показать и скрыть встроенный элемент (например, span), используя 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>

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

Answer 2

Вас порадует только одно CSS-свойство: http://terion -fallen.livejournal.com / 332945.html

#animated-element { display: inline-block!important }

Answer 3

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

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

Answer 4

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

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

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

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

Answer 5

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

Если display: inline-block хорошо поддерживается, вы можете изменить стиль на inline-block, а затем анимировать ширину или высоту, но, к сожалению, в наши дни это не очень хорошо работает. Возможно в 2010 году :) 1003 *

Answer 6

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