Question

i am very new at jquery and code, here i am trying to get the setTimeout event to be inside the .mouseout event but i’m not sure how to do that as i keep getting syntax error in my editor. Here’s what i have:

jQuery(document).ready(function() {
    $('.slidedown').hide(); 
    $('.trigger').hover( function(){ // enter animation

    $('.slidedown').stop(true,true).animate({
        height: ['toggle', 'swing'],
        }, 600, function() { /* animation done */ });

    }, function(){ // leave animation


$('.slidedown').mouseout()
    setTimeout( function(){
      $('.slidedown').stop(true,true).animate({
        height: '0px',
        }, 600, function() { /* animation done */ });
    }, 1000 );

  });
});

A small nuance, in this code the user mouses over a div, then another div bellow it slides down. Moving the mouse to the .slidedown div should keep it open until the mouse is removed. But will this code collapse the .slidedown div if the user doesn’t mouse over .slidedown after .trigger but instead moves the mouse directly from .trigger to another area of page? I.e i need some kind of ‘setTimeout’ that is trigged only if the user doesn’t move mouse over .slidedown after hovering over .trigger. Hope i make sense. Thanks for your help!

Answer 1

This line is the problem

$('.slidedown').mouseout()

It shoule be

$('.slidedown').mouseout( YOUR_CALLBACK_FUNCTION )

You should pass a callback function which will act as an event handler and inside that event handler you can call setTimeout() the way you have done it.

So the correct code would look like this

$('.slidedown').mouseout( function() {
   setTimeout( function(){
      $('.slidedown').stop(true,true).animate( {
          height: '0px',
         }, 
         600, 
         function() { /* animation done */ } 
      ); // animate ends here
   }, 1000 ); // setTimeout ends here
}); // mouseout ends here