SitePoint Sponsor

User Tag List

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

    jQuery: delayed hover events (beginner)

    I threw together my own piece of basic jQuery code to have a fadeIn and a fadeOut when I'm hovering a list item, this all works wonderfully apart from one small detail.

    When I rapidly move over the list item a couple of times in a row, the events start queueing up and the fades keep happening until the queue is done.

    How do I prevent this from happening?

    I tried adding a "stop" to a "mouseout" event, but that breaks the setup and nothing fades in when hovering.


    HTML Code:
    <script type="text/javascript">
    	$(document).ready(function(){
    		$('li.headlink').hover(function(){
    			$('ul', this).fadeIn("slow");
    		}, function(){
    			$('ul', this).fadeOut("slow");
    		});
    	});
    </script>

    Additionally, it would be neat to have the fadeIn stop when the mouse moves out of the list item before the animation is done, and then go straight through a fadeOut from where the fadeIn stopped (so if the fadeIn was at 60% or so, the fadeOut kicks in and starts from 60% to 0%, instead of 100% to 0%). But this isn't important, just a nice extra feature.

    Thans in advance.

  2. #2
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    $('ul', this).fadeIn("slow");
    queue:false;

    and for the fadeOut.... I think that should work, not on machine to test..


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
  •