jquery同时淡出和滑动

Question

我试图在悬停时同时滑动/淡化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 });
});

Answer 1

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

http://jsfiddle.net/bZXjv/

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

Answer 2

答案是,一旦任一效果激活,它将从元素中取出内联css属性"display = none".这些隐藏效果需要将display属性设置为"none".所以,只需重新排列方法的顺序,并在淡入淡出和幻灯片之间的链中添加一个css-modifier.

$('#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 3

为什么不使用jQuery进行滑动,而CSS转换为淡入淡出,因此它们不会相互干扰.很好地退化!

JS:

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

CSS:

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