1

我有两个图像滑出然后我希望我的内容 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";
}

}

谢谢 ：）

4

2 回答 2

3

很少有函数被 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);
});
于 2012-10-13T20:20:05.963 回答
3

该.css函数没有放在动画队列中，所以它会立即发生。请参阅此答案以获取允许您对其进行排队的插件。

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

if ($(ele).is(':visible')) {
    $("#btn2,#btn3").slideUp(1000, function() {
        $("#mecontent").delay(1000).fadeIn(400);
    });
} else {
    $("#btn2,#btn3").slideDown(1000, function() {
        $("#mecontent").hide();
    });
}
于 2012-10-13T20:20:51.497 回答