Анимация встроенных элементов с помощью jQuery
-
04-07-2019 - |
Вопрос
Я пытаюсь показать и скрыть встроенный элемент (например, диапазон) с помощью 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>
Решение
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>
Другие советы
Вас порадует только одно свойство CSS: http: //terion-fallen.livejournal .com / 332945.html р>
#animated-element { display: inline-block!important }
Я не думаю, что это возможно. Единственный способ, которым я мог бы подумать, это сделать, чтобы анимировать его непрозрачность между 0 и 1, и, используя обратный вызов для анимации, затем включить или выключить его.
$('.toggle').click(function() {
$('.hide:visible').animate(
{opacity : 0},
function() { $(this).hide(); }
);
$('.hide:hidden')
.show()
.animate({opacity : 1})
;
});
Как показали другие ответы, возможно исчезновение. Тем не менее, я не думаю, что «плавное скольжение» будет. Проще говоря, определенное свойство элемента должно быть анимированным. Встроенный интервал, как вы упомянули, не имеет определенной высоты или ширины, хотя имеет непрозрачность.
Я не думаю, что то, что вы хотите сделать, возможно до тех пор, пока display: inline-block хорошо поддерживается во всех браузерах. На данный момент, я думаю, я бы поменял фон на красный, а затем скрыл элемент.
Если display: inline-block хорошо поддерживается, вы можете изменить стиль на inline-block, а затем анимировать ширину или высоту, но, к сожалению, в наши дни это не очень хорошо работает. Может быть, в 2010 году :)
Тот факт, что «animate» изменяет анимацию на элемент блока, не является проблемой, если то, что вы пытаетесь скользить влево или вправо, позиционируется с помощью float: left, а все, что рядом с ним, также располагается с помощью float: левый
$('#pnlPopup #btnUpdateButton').assertOne().animate({ width: "toggle" });
Если стиль #btnUpdateButton соответствует следующему, он довольно хорошо скользит и сдвигает содержимое вправо.
#btnUpdateButton {
float: left;
margin-right: 5px;
}