Question

我在jquery中创建了一个小函数。我希望它在经过一段时间的延迟后加载。但我无法延迟执行此代码。这是下面的Jquery代码。

$(function(){
        $('.fade').delay(5000).show();
        $('.sboxa').delay(5000).show()
    })

以下是html代码：

<div class="fade"></div> <div class="sboxa"></div>

请帮助完成此功能。感谢

Answer 1

要对动画进行排序，您需要在show()方法中使用回调。在回调中，您可以使用setTimeout()来延迟显示下一个元素。

＆＃13;

$(function(){
    $('.fade,.sboxa').hide();
  
    $('.fade').show(0, function() {
        setTimeout(function() {
            $('.sboxa').show();
        }, 2000);
    });
});

＆＃13;

.fade {
  display: block;
  width: 50px;
  height: 50px;
  background: cornflowerblue;
}

.sboxa {
  display: block;
  width: 100px;
  height: 100px;
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fade">fade</div>
<div class="sboxa">sboxa</div>

＆＃13;

Answer 2

@Soviut的答案是正确的，但我认为你应该添加一个slow参数来显示或隐藏这样的方法：

$(function(){
    $('.fade,.sboxa').hide();
  
    $('.fade').show('slow', function() {
        setTimeout(function() {
            $('.sboxa').show('slow');
        }, 2000);
    });
});

.fade {
  display: block;
  width: 50px;
  height: 50px;
  background: cornflowerblue;
}

.sboxa {
  display: block;
  width: 100px;
  height: 100px;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fade">fade</div>
<div class="sboxa">sboxa</div>

希望这有帮助！

Answer 3

JQuery动画函数采用一个可选的函数参数，该参数在动画完成后执行，以允许＆＃34;链接＆＃34;动画。不需要手动定时器。

＆＃13;

$(function(){
    $('.fade,.sboxa').hide();
  
    $('.fade').show(2000, function() {
            $('.sboxa').show("slow");
    });
});

＆＃13;

.fade {
  display: block;
  width: 50px;
  height: 50px;
  background: cornflowerblue;
}

.sboxa {
  display: block;
  width: 100px;
  height: 100px;
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fade">fade</div>
<div class="sboxa">sboxa</div>

＆＃13;

在jquery函数中添加延迟

3 个答案: