Question

我有一个名为noti_box的div，它在页面加载时淡入。有时可能只有一个noti_box div或者可能有2 3或4。

用户可以通过点击它来关闭此div。

如果页面上没有显示noti_box，我试图淡入另一个div，让我们调用这个div（广告）。

然而，根据我当前的脚本，因为我的第一个div noti_box需要几秒钟才能淡入，它会自动显示我的广告div。应该发生的事情是我的广告div应该只在用户关闭div noti_box后显示，而不是在页面淡入之前显示。

有没有办法让我的jquery函数延迟等到noti_box完成淡入？

noti_box jquery：

<script>
    $('.noti_box').each(function(i) {
    // 'i' stands for index of each element
    $(this).hide().delay(i * 1000).fadeIn(1500);
});
</script>

我的广告div jquery：

<script type="text/javascript">
$(document).ready(function(){
if ($('.noti_box').is(':hidden')) {
$(".advert").fadeIn("slow");
}
}); </script>

我已经接近我需要的东西了：

<script>        
$(document).ready(function(){
    var animations = [];

    $('.noti_box').each(function(i) {
        animations.push(
           $(this).hide().delay(i * 1000).fadeIn(1500).promise()
        );
    });
    $.when.apply($, animations).done(function () {
        if ($('.noti_box').is(':visible')===false) {
        $(".advert").fadeIn("slow");
    }});
});
</script>

通过使用这个脚本，我的noti_boxes淡入，如果我在1秒内关闭它们淡入然后我的广告框淡入。但是如果我等待1秒后然后我关闭noti_boxes我的广告没有完全消失。有什么想法吗？

Answer 1

由于你知道元素的数量和每个淡入淡出所花费的时间，你可以计算广告显示所需的总延迟，如下所示：

// number of elements * their delay + fade time
var totalDelay = ($('.noti_box').length - 1) * 1000 + 1500; 
$(document).ready(function(){
  setTimeout(function(){
    $(".advert").fadeIn("slow");
  }, totalDelay);
});

这是一个包含5个noti框的示例（可以是任意数字）：

＆＃13;

$('.noti_box').each(function(i) {
  // 'i' stands for index of each element
  $(this).hide().delay(i * 1000).fadeIn(1500);
});

// number of elements * their delay + fade time
var totalDelay = ($('.noti_box').length - 1) * 1000 + 1500;
$(document).ready(function() {
  setTimeout(function() {
    $(".advert").fadeIn("slow");
  }, totalDelay);
});

＆＃13;

.advert {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="noti_box">1</div>
<div class="noti_box">2</div>
<div class="noti_box">3</div>
<div class="noti_box">4</div>
<div class="noti_box">5</div>
<div class="advert">ADVERT</div>

＆＃13;

Answer 2

尝试将document.ready放在Javascript SetTimeout函数中。

Answer 3

我找到了问题的答案，我设置了我的上一个函数每秒重复一次的时间间隔。

<script>        
$(document).ready(function(){
    var animations = [];

    $('.noti_box').each(function(i) {
        animations.push(
           $(this).hide().delay(i * 1000).fadeIn(1500).promise()
        );
    });

    $.when.apply($, animations).done(function () {
        time=setInterval(function(){
        if ( $('.noti_box:visible').length === 0 ) {
            $(".advert").fadeIn("slow");
        } },1000);
    });
});
</script>

jquery延迟文件准备函数的秒数？

3 个答案: