Question

我正在尝试向jQuery Show / Hide调用添加SetTimeout和动画类型转换。以下是我目前拥有它的方式，但是我希望添加“show”div在恢复原始#bg_dv之前显示的特定时间量。我还想在可能的情况下在效果之间添加动画过渡。

   function tilt(){
    $("#area1").click(function(){
        $("#bg_div").hide();
        $("#bg_skew").show(); // I would like to show this Div for about 5 seconds
 // and then have original back. 
       });
    }

Answer 1

$("#bg_div").hide(0).delay(5000).show(0);
$("#bg_skew").show(0).delay(5000).hide(0);

如果您需要动画，可以使用适当的内容替换对hide()和show()的调用。例如fadeIn()和fadeOut()。

Answer 2

    $("#area1").click(function(){

        $("#bg_div").fadeOut('fast',function(){
             $("#bg_skew").delay(5000).fadeIn('fast');
        });


    });

为了防止多次点击的缓存并让动画多次播放你还应该看看

.stop(true,true)

在任何动画之前。还要看看这个动画选项 - 属性。

{cache:false}

Answer 3

这很简单。只需在show.delay(5000)中输入毫秒即可将其延迟5秒钟。

语法：

$(selector).delay(speed)

speed：以毫秒为单位的时间，例如5000秒5秒。

$(selector).show(speed,easing,callback)

speed：这里以毫秒为单位将时间设为1秒钟。

easing：它定义不同点的元素速度，即“线性”“摆动”。

callback：在这里你可以把你的函数放在完成show方法后执行。例如，当您在显示图像后单击按钮显示图像时，它将执行funxtion，例如 .show(1000,function(){alert("hello")};);

希望我能帮到你。

添加SetTimeout并转换到jQuery Show / Hide

3 个答案: