Question

我有以下脚本，该脚本在多个div中淡出，称为＆＃39; noti_box＆＃39;。如果用户关闭这些div，则另一个div＆＃39;广告＆＃39;在它的位置消失。

<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");
        } },200);
    });
});
</script>

这个工作正常，基本上这里发生的是我的最后一个功能是卡在一个循环上，其中广告＆＃39;当＆＃39; noti_box＆＃39;在页面上不可见。

但是，现在我希望用户点击一个名为“＆＃39; icons＆＃39;如果他们这样做，那么这应该会重新淡出“#i; noti_box＆＃39; div和淡出广告＆＃39;使用此代码的div：

<script>
$('.icons').click(function(){ 
    $('.advert').fadeOut('fast');
$('.noti_box).fadeIn('fast');

});

</script>

我在这里遇到的问题是＆＃39;广告＆＃39; div在眨眼之间再次淡入淡出，而不会消失在我的＆＃39; noti_box＆＃39; DIV。这是因为我的第一个javascript函数仍在循环中并阻止我的第二个脚本执行。

所以我需要做的是，我认为当用户点击我的div＆＃39;图标时，我的第一个脚本设置了超时间隔。然后在脚本执行完毕后清除超时间隔和＆＃39; noti_box＆＃39; div再次出现。

有人可以告诉我如何能够这样做，因为我是jquery的新手。感谢

Answer 1

function notiBox(ele){
    this.ele=ele;
    this.ele.hide().fadeIn('slow');
    console.log("I have been born! "+ele);
}
notiBox.prototype={
    constructor:notiBox,
    advert:function(){
        var ele=this.ele;
        this.ele.fadeOut('fast',function(){ele.next('.advert').fadeIn('slow');});
    },
    fadeBack:function(){
        var ele=this.ele;
        this.ele.next('.advert').fadeOut('slow',function(){ele.fadeIn('slow');});
    },
}

$(document).ready(function(){
    var timeIn=1;
    $('.noti-box').each(function(){
        var self=this;
        this.timer=setInterval(function(){self.notiBox=new notiBox($(self));clearInterval(self.timer);},1000*timeIn);
        timeIn++;
    });
    $('.icon').click(function(){
        $('.noti-box').notiBox.fadeBack();
    });
});

正确的是，上面是一个＆＃39; OOP＆＃39;基于你的问题的方法。您可能遇到的唯一问题是您的广告div不在box div旁边。对不起，我想你的DOM元素和布局。我的方法也不正确，因为我已经写了很长时间了。我会做一些测试。与此同时，你能提出一些HTML吗？这样我就可以调整我的代码：d

jquery，如果用户点击div，则超时另一个jquery函数？

1 个答案: