Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 491
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

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