CODEWITHSUNDEEP
jquery
Adrian
Adrian

Reputation: 2012

disable click trigger on hover jquery

I have slider set to click the next button every 5 seconds by using setInterval. My plan is that when you hover over the image this clicking stops. The only way I can think of doing this is by writing a new setInterval on hovering thats so long that nothing would happen. But this doesnt work as it doesnt override the original one.

Is there a way to do this in jQuery? All Im looking to do is stop the click trigger on hovering....

     setInterval(function() {
      jQuery('.next_button').trigger('click');
    }, 1000);       

$(".main-slide img").hover(function () {

    setInterval(function() {
    jQuery('.next_button').trigger('click');
    }, 60000000);   

    },
function() {
    setInterval(function() {
     jQuery('.next_button').trigger('click');
    }, 1000);
    }
    );

Upvotes: 1

Views: 1592

Answers (4)

Red
Red

Reputation: 6378

Are you trying to remove the setinterval ?

then try

var p = setinterval(function(){ //code  },time);

and after

clearInterval(p);

Upvotes: 0

Adam Pietrasiak
Adam Pietrasiak

Reputation: 13184

Create function that has click function definition and then:

$('.element').hover(
        function(){
            $(this).unbind('click')

        },function(){
            $(this).click(function(){
                definedBeforeClickFunction();

            });
        });

This way you dont need to clear intervals.

Upvotes: 1

adeneo
adeneo

Reputation: 318172

You can use a flag, set it when the mouse is over the element and unset it when the mouse leaves the element, and check it before triggering the click :

var mouse_is_over = false;

setInterval(function () {
    if (!mouse_is_over) $('.next_button').trigger('click');
}, 1000);

$(".main-slide img").on('mouseenter mouseleave', function(e) {
    mouse_is_over = e.type == 'mouseenter';
});

Upvotes: 2

Nabil
Nabil

Reputation: 355

Try this,

 $(document).ready(function(){
  slider();
    function slider(){
 var t =  setInterval(function() {
  jQuery('.next_button').trigger('click');
   }, 1000);  
 }     

$(".main-slide img").hover(function () {

  clearInterval(t);
}
   $(".main-slide img").mouseout() {
   slider();
 }
); 

 });

Upvotes: 0

Related Questions