我在 stackoverflow 上找到了这段有用的代码,但由于某种原因,它只在第一次应用时有效,再也不会......
如何使动画始终有效,而不仅仅是第一次?
来源:How to run jQuery fadeIn() and slideDown() simultaneously?
jQuery(document).ready(function( $ ) {
var something3 = document.getElementById('nav-action');
something3.style.cursor = 'pointer';
something3.onclick = function() {
$(".menu-item")
.css('opacity', 0)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
});
这是我的CSS
.menu-item {
font-size: 61px;
font-weight: 100 !important;
list-style: outside none none;
margin-top: 12px; list-style: none;
padding: 5px; opacity:0;
display:none;
}
最佳答案
它只工作一次的原因是 .slideDown()
方法会将元素的 display
设置为 block
,并且然后,每次单击时,您都只是为不透明度设置动画。您可以链接 .hide()
方法,以便在设置元素动画之前隐藏该元素。
这样做会多次起作用:
$(".menu-item")
.hide()
.css('opacity', 0)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
关于jquery - 为什么这个效果只在第一次有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34191618/