I have a div called noti_box which fades in on page load. Sometimes there may be only one noti_box div or there might be 2 3 or 4.
a user can close this div should they want to by clicking on it.
If no noti_boxes are displayed on the page I am trying to fade in another div, lets call this div (advert).
however with my current script I have, because my first div noti_box takes a couple of seconds to fade in it will automatically show my advert div. what should happen is my advert div should only show once the user has closed the div noti_box, not before it fades in on the page.
Is there a way I can delay my jquery function to wait until the noti_box has finished fading in?
noti_box jquery:
<script>
$('.noti_box').each(function(i) {
// 'i' stands for index of each element
$(this).hide().delay(i * 1000).fadeIn(1500);
});
</script>
my advert div jquery:
<script type="text/javascript">
$(document).ready(function(){
if ($('.noti_box').is(':hidden')) {
$(".advert").fadeIn("slow");
}
}); </script>
I have gotten close to what I need:
<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>
by using this script my noti_boxes fade in and if I close them within like 1 second of them fading in then my advert box fades in. however if I wait after 1 second then I close the noti_boxes my advert doesn't fade in at all. Any ideas?
Aucun commentaire:
Enregistrer un commentaire