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

jquery同时淡出和滑动

3 个答案: