2015-01-28 1 views
0

У меня есть следующий скрипт, который исчезает в нескольких div, называемых «noti_box». Если пользователь закрывает эти div, тогда на его место исчезает другое объявление «div».jquery, тайм-аут другой функции jquery, если пользователь нажимает на div?

<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> 

это прекрасно работает, в основном то, что происходит здесь, моя последняя функция застрял в петле, где «объявление» ДИВ затухает в том, когда «noti_box» не отображается на странице.

Однако, теперь я хочу, чтобы пользователь щелкните DIV под названием «иконки», и если они это сделают, то это должно вновь исчезать в дивы «noti_box» и исчезать из «объявление» Div с помощью этого кода:

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

}); 

</script> 

Проблема, с которой я столкнулся, - это «объявление», которое исчезает снова и снова в мгновение ока, не затухая в моем «noti_box» div. Это связано с тем, что моя первая функция javascript по-прежнему находится в цикле и препятствует выполнению моего второго скрипта.

Так что мне нужно сделать, я думаю, что задан временной интервал для моего первого скрипта, когда пользователь нажимает на мой значок «div», а затем очищает интервал времени ожидания после выполнения скрипта и разделителей «noti_box» снова показываются.

Может кто-нибудь, пожалуйста, покажите мне, как я смогу это сделать, поскольку я новичок в jquery. Thanks

+0

Сколько divs называется noti-box для начала? Я хочу сделать их объектами, а не тем, что вы делаете. Гораздо проще, а затем вы сделали это один раз, а не в цикле for. – sourRaspberri

+0

И почему вы используете setInterval? Вот что вызвало проблему: p – sourRaspberri

+0

@sourRaspberri нет установленного количества div 'noti_box' может быть 1 или 2 или 3 или 4 и т. Д. В зависимости от записи, хранящейся в моей базе данных. Я использую заданный интервал, потому что мои деления «noti_box» исчезают после небольшой задержки, если у меня не было заданного интервала, тогда div div будет исчезать, в то время как деления «noti_box» все еще исчезают, где as таким образом, он обеспечивает, чтобы объявление было отображено только тогда, когда пользователь закрывает div-файлы noti_box –

ответ

0
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(); 
    }); 
}); 

Правильно вышеописанный подход к вашей проблеме основан на «ООП». Единственная проблема, с которой вы могли столкнуться, заключается в том, что ваши рекламные divs не находятся рядом с полем div. Извините, я думаю, ваши элементы DOM и макет. Также мои методы не правильны, потому что я так давно написал что-то подобное. Я сделаю несколько тестов. В то же время, вы могли бы поместить некоторый HTML? Так что я могу настроить свой код: d

Смежные вопросы