SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery, verify time condition to run function

    Hi all, i got a function like this

    $(document).ready(function(){

    $('.item').each(function() {
    var view = $(this).find('.myclass');
    $(this).bind('mouseenter',function() {
    view.slideDown();
    });
    $(this).bind('mouseleave',function() {
    view.slideUp();
    });
    });

    });

    With this, on mouse over and out an object, i can make a slide going up and down.

    The problem is i dont want the slide to move immediatly...but ONLY if mouse is over the object for like more than 1 second...if the mouse goes out before nothing have to happen. How can i do this ?

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try something like this using setTimeout

    Code:
    $(document).ready(function() {
    	$('.item').each(function() {
    		var view = $(this).find('.myclass');
    		
    		//variable to store the timeout id
    		var tid = null;
    		//did the view slide down?
    		var went = false;
    		
    		$(this).bind('mouseenter',function() {
    			//set the timeout and store timeout id
    			tid = setTimeout(function() { view.slideDown(); went = true; }, 1000);
    		});
    		$(this).bind('mouseleave',function() {
    			//clear the timeout
    			if(tid != null) { clearTimeout(tid); }
    			//if the view did slide down then slide back up
    			if(went) { view.slideUp(); }
    		});
    	});
    });

  3. #3
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    fantastic!

    it works perfectly... Thank you so much for the spent time on this justinbezanson


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •