Question

我有两个图像滑出然后我希望mycontent div在图像消失后消失。动画工作正在被调用而不是延迟部分:(

为什么这不起作用的任何想法？

function mepage(){
var ele = document.getElementById("btn2");
var ele = document.getElementById("btn3");
var mycont = document.getElementById("mycontent");
if(ele.style.display == "inline-block") {
    $("#btn2").slideUp(1000);
    $("#btn3").slideUp(1000);
    $("#mecontent").delay(1000).css("visibility","visible").fadeIn(400);

}
else {
    $("#btn2").slideDown(1000);
    $("#btn3").slideDown(1000);
    $("#mecontent").css("visibility","hidden");
    ele.style.display = "inline-block";
}

}

谢谢：）

Answer 1

很少有函数被jQuery破坏，css不在其中。

你可以这样做：

$("#btn2").slideUp(1000);
$("#btn3").slideUp(1000, function() {
    $("#mecontent").css("visibility","visible").fadeIn(400);
});

或者，因为我不知道为什么你在fadeIn之前改变了可见性：

$("#btn2").slideUp(1000);
$("#btn3").slideUp(1000, function() {
    $("#mecontent").fadeIn(400);
});

Answer 2

.css函数未放入动画队列中，因此它会立即发生。有关允许您对其进行排队的插件，请参阅this answer。

那就是说，最好只使用“完成”功能，并使用.show()和.hide()来改变元素的可见性：

if ($(ele).is(':visible')) {
    $("#btn2,#btn3").slideUp(1000, function() {
        $("#mecontent").delay(1000).fadeIn(400);
    });
} else {
    $("#btn2,#btn3").slideDown(1000, function() {
        $("#mecontent").hide();
    });
}

jQuery：为什么我的延迟不起作用？

2 个答案: