jquery .animate（）-这种代码有点我想要的

Question

I am trying to make a div slide down when the mouse moves over another div just above it. Basically the div above it is just the trigger that makes the div slide down. Mouseover of .trigger makes .slidedown expand, and mouseout of .slidedown makes itself slide back up. Here's the code i have so far:

$(document).ready(function() {
 $('.slidedown').hide(); 
 //When mouse rolls over
  $('.trigger').mouseover(function(){ 
   $('.slidedown').stop().animate({
   height: ['toggle', 'swing'],
  }, 600, function() {
    // Animation complete.
  });
});

    //When mouse is removed
   $('.slidedown').mouseout(function(){  
     $('.slidedown').stop().animate({
   height:'0px'
   }, 600, function() {
    // Animation complete.
  });
});
});

This works, but there are just two teaks i need help with. Firstly, after mouseout and the .slidedown div slides up and disappears, if i then mouse over the .trigger div again, nothing happens. It should make the .slidedown move down again. I need it to every time keep working. I tried removing the .stop() but it still doesn't work.

Also can i make it also slide back up if the mouse moves out of .trigger but only if it isn't moving out of .trigger into .slidedown? This is so incase the user doesn't move the mouse into .slidedown, it would remain forever which isn't good. Or just have a time limit that it can remain expanded if the mouse doesn't move over .slidedown.

Second, is there a way to make a delay of around 1 second between mouseout and the div sliding back up? Thanks for your help!

Answer 1

You might try using the jQuery hover event. For the delay, you can put the closing animation in setTimeout :

$(document).ready( function(){
  $('.trigger').hover( function(){ // enter animation

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

    }, function(){ // leave animation

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

  });
});

You might also look into the hoverIntent plug-in for more nuanced control over the mouseenter/mouseleave behavior, including timing.

Answer 2

I think you'll find that setting a numerical height in $('.trigger').mouseover() may help the animation be repeatable. FYI, you can set an integer number for something like height or width in jQuery and it will automatically set the unit to px for you.

As Ken pointed out, setTimeout is useful for a delay in code, but keep it in your $('.slidedown').mouseout() event or the slideown div will hide after you mouseout of the trigger div instead of when you leave the slidedown div as you specified.