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

Question

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

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

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

<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',
  });
});

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

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

Answer 5

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

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

Answer 6

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

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

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

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