jquery淡入淡出并同时滑动

我试图在hover时同时滑动/淡出div，然后使用JQuery在hover结束时滑动/淡出。 幻灯片/淡出正常工作，但幻灯片/淡入不能。 它只是幻灯片没有褪色。 有任何想法吗？

#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 }); }); 

Answer 1

答案是，一旦任何效果激活，它将内联CSS属性“显示=无”的元素。 这些隐藏效果要求将display属性设置为“none”。 所以，只需重新排列方法的顺序，并在淡入淡出和幻灯片之间的链中添加一个CSS修饰符。

 $('#anotherDiv').hover(function() { $('#myDiv').stop(true, true).fadeIn({ duration: slideDuration, queue: false }).css('display', 'none').slideDown(slideDuration); }, function() { $('#myDiv').stop(true, true).fadeOut({ duration: slideDuration, queue: false }).slideUp(slideDuration); }); 

Answer 2

idk如果这有帮助，但你可以跳过slideUp和fadeIn快捷方式，只是使用animation：

http://jsfiddle.net/bZXjv/

 $('#anotherDiv').hover(function() { $('#myDiv') .stop(true, true) .animate({ height:"toggle", opacity:"toggle" },slideDuration); }); 

Answer 3

为什么不使用jQuery来滑动，CSS转换为淡入淡出，所以它们不会相互干扰。 很好地降级！

JS：

 $('#myDiv').addClass("fadingOut"); $('#myDiv').slideUp(600,function(){ $('#myDiv').removeClass("fadingOut"); }); 

CSS：

 .fadingOut { transition:opacity 0.6s linear; opacity:0; }