Question

I want my div to slide up back to the start position when my mouse goes out, but I want my div to cancel that action and go back to its expanded position if the mouse goes back over the div again.

I need some way to stop this action:

    $(".logo").mouseleave(function(){
            $(".logo").animate({top: '-65px'}, 'slow')
    });

Here is the fiddle: http://jsfiddle.net/gaPah/6/

Answer 1

Ok finally got to the bottom of this. User clicks toggled. Div opens. User leaves div. It waits 700ms then closes. If the user interrupts it closing it reopens. If the user doesn’t interrupt, it resets.

NB. .delay() does not play well with .animate() so it gets complicated, but I’m sure there would be an easier way to do this.

Also note, I’ve bound custom event openme to avoid writing the same animate line twice (once on mouseover and once on click of the button).

Working demo

$('#btn_panel').click(function(event){
  $(".logo").trigger('openme');
});

$('.logo').on('openme', function(){
  $(this).stop().animate({top: 0}, 700);
}).on('mouseenter', function(){
  clearTimeout($(this).to);
  if (parseInt($(this).css('top'))>-65){
      $(this).trigger('openme');
  }
}).on('mouseleave', function(){
  var el=$(this);
  $(this).to=setTimeout(function(){
    el.animate({top: -65}, 700);
  },700);
});