• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 498
  • Last Modified:

jQuery Pause on Hover

Hello,

Can you please help me find a way to pause the slideshow if the mouse is over it?

http://jsfiddle.net/g7aBe/2/

Matt
0
movieprodw
Asked:
movieprodw
  • 6
  • 4
2 Solutions
 
leakim971PluritechnicianCommented:
http://jsfiddle.net/g7aBe/5/

jQuery(function($) {
     var divs = $('.fade');
	 
	 function fade() {
         if(go_away) return;
		var current = $('.current');
		var currentIndex = divs.index(current),
			nextIndex = currentIndex + 1;
		
		if (nextIndex >= divs.length) {
			nextIndex = 0;
		}
		
		var next = divs.eq(nextIndex);
		
		current.stop().fadeOut(1000, function() {
			$(this).removeClass('current');
			setTimeout(fade, 6000);
		});

		next.stop().fadeIn(1000, function() {
			$(this).addClass('current');
		});
		
	}

     fade();
    
    var stop = function() {
        go_away = true;
    }
    var release = function() {
        go_away = false;
    }
    
    $("#wrapper").hover(stop, release);
})

Open in new window

0
 
movieprodwAuthor Commented:
Hello leakim, that was not loading.
0
 
GaryCommented:
Leakim's solution is kinda groovy so give him the point, here's another method
Name your timeout then you can cancel/restart it.

donext = setTimeout(fade, 6000);

    $("#wrapper").hover(function(){
      clearTimeout(donext)  
    },function(){
      donext = setTimeout(fade, 6000);  
    })


http://jsfiddle.net/GaryC123/g7aBe/7/
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
movieprodwAuthor Commented:
Leakim is totally grooooovy, but the jsfiddle is not working when I go to it
0
 
leakim971PluritechnicianCommented:
@Gary is right, I forgot to set the default value : http://jsfiddle.net/g7aBe/11/

var go_away = false;

Open in new window

0
 
movieprodwAuthor Commented:
So awesome! Thanks guys!
0
 
movieprodwAuthor Commented:
Any idea why it is not working here?
http://dev.zdental.com/
0
 
leakim971PluritechnicianCommented:
what this line supposed to do ?

$("#wrapper").hover(function() {
0
 
movieprodwAuthor Commented:
So you're saying I am a goof :=P

I will change that to .banner-box, and test again, thanks!
0
 
movieprodwAuthor Commented:
It doesn't really matter for my purposes but for me if I have the mouse over this for lets say 10 seconds then move it, the slideshow never starts again.

http://jsfiddle.net/g7aBe/11/

Not complaining, you helped me a lot, thank you.
0
 
leakim971PluritechnicianCommented:
So you're saying I am a goof :=P

lol, no, just want to be sure your own the code, look like yes ;-))

http://jsfiddle.net/g7aBe/12/
call fade when release
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now