我试图同时滑动/淡入一个div悬停,然后滑动/淡出在悬停结束时,使用JQuery。幻灯片/淡出正常工作,但幻灯片/淡入淡出不会。它只是幻灯片没有褪色。有任何想法吗?
#myDiv { display: none; height: 110px; position: absolute; bottom: 0px; left: 0px; } $('#anotherDiv').hover(function() { $('#myDiv').stop(true,true).slideDown(slideDuration).fadeIn({ duration: slideDuration,queue: false }); },function() { $('#myDiv').stop(true,true).slideUp(slideDuration).fadeOut({ duration: slideDuration,queue: false }); });
解决方法
答案是,一旦效果激活,它需要内联css属性“display = none”的元素。这些隐藏效果需要将display属性设置为“none”。所以,只是重新排列方法的顺序,并在褪色和幻灯片之间的链中添加一个css-modifier。
$('#anotherDiv').hover(function() { $('#myDiv').stop(true,true).fadeIn({ duration: slideDuration,queue: false }).css('display','none').slideDown(slideDuration); },true).fadeOut({ duration: slideDuration,queue: false }).slideUp(slideDuration); });