Question

我希望div在x秒后消失。只需一段简单的代码，当用户点击按钮时，这个div将会滑动（jQuery slideDown（）方法）。

$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
<div id ="flip">User click</div>
<div id = "panel">Contents</div>

我需要这个#flip在x秒后自动消失。但是当然，＃panel将保留。我是jquery的新手，我想在我的html上添加一些漂亮的外观。

Answer 1

您可以使用您的代码执行此操作：

$("#panel").slideDown("slow").delay(1000).slideUp('slow');

如果您希望#flip消失，可以使用当前的html格式执行此操作：

$(this).next().slideDown("slow").end().delay(1500).slideUp('slow');

延迟将以毫秒为单位。

Answer 2

不确定您是否希望它在点击后消失？

您可以使用setTimout在x毫秒后运行代码

setTimout(function() {
    $("#flip").hide(); // or .remove() if you want to get rid of it completely
}, 5000); //5000 milliseconds

你可以将它放在你的点击事件处理程序中，以便在点击后实现这一点。

Answer 3

您可以将回调函数作为slideDown函数的第二个参数调用。动画完成后，将调用此代码。如果您想等待x秒，可以使用setTimeout()功能：

$("#flip").click(function(){
    $("#panel").slideDown("slow", function(){
        //setTimeout(function(){
            $('#flip').hide(); 
       // }, 5000);
    });    
});

这是一个有效的jsfiddle：http://jsfiddle.net/gfZM2/2/

Answer 4

知道了，只是按照@rynolson

的建议添加了一段代码setTimeout

$(document).ready(function(){
setTimeout(function() { $("#flip").fadeOut(15000); }, 5000)
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});

用户点击时jquery幻灯片

4 个答案: