0

I'm not big on javascript/jquery, but what I'm trying to do is simply add a timout to a mouseenter function, which I can do no dramas, but I also want to clear the timeout if the user leaves the element before the timeout expires - mainly to allow for cursor skipping over the triggering element.

Code is below (mouseenter works, mouseleave works but doesn't clear the timeout):

    $(document).ready(function() {

    var timeout;

    $('#mainMenu ul li').mouseenter(function() {
        var dropTab = 'ul.' + this.id + 'Dropdown';
        timeout = setTimeout( function(){ 
            $(dropTab).slideToggle("fast") }, 500
            );
    }); 

    $('#mainMenu ul li').mouseleave(function() {
        clearTimeout(timeout);
        var dropTab = 'ul.' + this.id + 'Dropdown';
        setTimeout( function(){ 
            $(dropTab).slideToggle("fast") }, 250
            );
    }); 
   });
themerlinproject
  • 3,542
  • 5
  • 37
  • 55
Nathan
  • 949
  • 1
  • 20
  • 35

5 Answers5

2

Perhaps you can try using .hover(). This example works for me: http://jsbin.com/egaho3/edit

RussellUresti
  • 6,211
  • 4
  • 28
  • 26
  • .hover() caused some strange behaviours - stayed with mouseenter and leave, but the rest of your example did the trick. thanks. – Nathan Mar 28 '11 at 00:29
1

Easing would add to the UX, for sure. Without being overly-programmatic, I'd clearTimeout( ) like this: (jsFiddle)

$( document ).ready( function( )
{ 
    var timeout;
    var maxHeight = 167;
    var minHeight = 20;

    $( '#mainMenu .list-item' )

    .bind( 'mouseenter', function( )
    {
        var el = $( this );

        timeout = setTimeout( function( )
        {
            el.stop( ).animate( { 'height' : maxHeight + 'px' } );
        }, 500 );               
    } )

    .bind( 'mouseleave', function( )
    {
        var el = $( this );

        if ( !timeout ) 
        {
            timeout = setTimeout( function( )
            {
                el.stop( ).animate( { 'height' : minHeight + 'px' } );
            }, 250 ); 
        }

        else
        {
            el.stop( ).animate( { 'height' : minHeight + 'px' } );
        }

        clearTimeout( timeout );
    } );

   $( '.list-link' ).bind( 'click', function( )
    {
          var text = $( this ).text( );
          var parentListItem = $( this ).parent( ).attr( 'id' );
          alert( 'List item hovered: ' + parentListItem + "\r" + 'Link clicked : ' + text );                      
    } );
} );​​
edwerner
  • 31
  • 1
  • 5
0

This might be able to explain the problem more: JQuery, setTimeout not working

Community
  • 1
  • 1
corroded
  • 21,406
  • 19
  • 83
  • 132
0

try this ..i'm not sure .

$(document).ready(function() {

var timeout;

$('#mainMenu ul li').mouseenter(function() {
    var dropTab = 'ul.' + this.id + 'Dropdown';
    timeout = setTimeout( function(){ 
        $(dropTab).slideToggle("fast") }, 500
        );
});   

clearTimeout(timeout);


$('#mainMenu ul li').mouseleave(function() {

    var dropTab = 'ul.' + this.id + 'Dropdown';
  timeout=  setTimeout( function(){ 
        $(dropTab).slideToggle("fast") }, 250
        );
});

});

0

Try .hover(), might work :

$(document).ready(function() {
    var timeout;
    $('#mainMenu ul li').hover(function() {
        var dropTab = 'ul.' + this.id + 'Dropdown';
        timeout = setTimeout( function(){ 
            $(dropTab).slideToggle("fast") }, 500
        );
    },
    function() {
        if(timeout)clearTimeout(timeout);
        var dropTab = 'ul.' + this.id + 'Dropdown';
        setTimeout( function(){ 
            $(dropTab).slideToggle("fast") }, 250
        );
    }); 
});
Prakash
  • 6,562
  • 3
  • 25
  • 33