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

答案是,一旦任何效果激活,它将内联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); }); 

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

http://jsfiddle.net/bZXjv/

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

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

JS:

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

CSS:

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