0

I have a hidden div that fades in on a jquery click method. This div has a slideshow that is powered by a simple setInterval, that unfortunately runs constantly on the hidden div. I'm struggling to make the setInterval start when I click to fadeIn the div and end when I click to hide it again. I need to make the interval run only whilst the div is showing.

This is what I have:

//3d Visualisation overlay containing slideshow
$('.overlay').hide();   
$('.vis1').click(function(){
    $('.visual-1').fadeIn(function(){;
        $('.close').click(function(){
            $('.visual-1').fadeOut();
        })
    });
});
//slideshow interval
$('.slideshow').hide(); 
$('.vis1').click(function(){
    var inter = setInterval(function() { 
        $('.slideshow > div:first')
            .fadeOut(10)
            .next()
            .fadeIn(10)
            .end()
            .appendTo('.slideshow');
    },  4000);
}); 
$('.close').click(function(){
    clearInterval(inter);
});

The clearInterval here has also stopped the .close div from hiding the slideshow again.

1 Answer 1

0

The variable inter is not accessible from the .close click function. The code is quite confusing to me because you have 2 functions attached to a click event on the .vis1 element. So I just can tell you to declare inter outside of the function where you use the setInterval, so you can clear it on the .close element click handler.

1
  • Legend! Worked like a charm. Thanks.
    – drizzle
    Nov 26, 2015 at 10:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.