CODEWITHSUNDEEP
jquery
Aessandro
Aessandro

Reputation: 5761

jQuery stop a function running after click event

The following works but I would like the 'playSlideshow()' to stop once I click on '$('.js-slideshow span')'? 

$("img.clickable").click(function(e){// showing and hiding property images
    e.stopPropagation();
    $('.js-slideshow span').delay(500).fadeIn();
    var $window = $(window);
    var $windowWidth = $(window).width();
    var clickableImage = $(this);   
    var clickableImageRightPx = clickableImage.css('right');
    var clickableImageRightInt = parseInt(clickableImageRightPx , 10);

    if (clickableImageRightInt == -108) {
        playSlideshow();            
    }

});

$('.js-slideshow span').click(function(){
    $(this).fadeOut(function(){
        $('.showImg').removeClass("showImg");
            // stop playSlideshow();
    });
});

function playSlideshow(){

  $(".js-slideshow > img:gt(0)").delay(500).fadeOut();

  setInterval(function() { 
      $('.js-slideshow > img:first')
      .fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo('.js-slideshow');},  3000);

       }

 }

Upvotes: 0

Views: 567

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

Use the interval reference from the playSlideshow method and user clearInterval() to stop it in the js-slideshow span click handler

$('.js-slideshow span').click(function () {
    clearInterval(slideshowInteval)
    $(this).fadeOut(function () {
        $('.showImg').removeClass("showImg");
        // stop playSlideshow();
    });
});

var slideshowInteval;

function playSlideshow() {

    $(".js-slideshow > img:gt(0)").delay(500).fadeOut();

    slideshowInteval = setInterval(function () {
        $('.js-slideshow > img:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('.js-slideshow');
    }, 3000);

}

Upvotes: 1

Related Questions