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:
$('#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; }