0

私はSOを見回していましたが、具体的な答えを見つけることができませんでした。私の問題は、.mouseenter(function(){ })が起動され.mouseleave(function(){ })、両方のアニメーションが完了した直後にが起動されたときに、代わりに、がアニメーションを終了するの.mouseleave(function(){ })を停止したいということです.mouseenter(function(){ })。

これが私が現在持っている方法のjsfiddleです。

HtML：

<div id="header">
  <div id="header-align">

  </div>
</div>​

CSS：

#header {
  width: 100%;
  height: 200px;
  position: fixed;
  top: -170px;
}

#header #header-align {
  width: 400px;
  height: 100%;
  border: 1px dotted #000;  
  margin: 0 auto 0;   
}

jQuery

​$("#header").mouseenter(function(){

  $(this).animate({ top: -20 }, {
    duration: 'slow',
    easing: 'easeOutBack'
  })

});

$("#header").mouseleave(function(){

  $(this).animate({ top: -170 }, {
     duration: 'slow',
     easing: 'easeOutBack'
  })

});

私は何かのようなものを考えてbind(function(){ })い.stopPropagation()ましたが、良い答えを見つけることができませんでした

4

1 に答える 1

4

追加してみました.stop()か？

$(this).stop().animate({ top: -170 }, {
     duration: 'slow',
     easing: 'easeOutBack'
  })

jsFiddle

の使用を検討することもできます.hover()。

​$("#header").hover(function(){
  $(this).stop().animate({ top: -20 }, {
    duration: 'slow',
    easing: 'easeOutBack'
  })
},
function(){
  $(this).stop().animate({ top: -170 }, {
     duration: 'slow',
     easing: 'easeOutBack'
  })
});
于 2012-10-26T22:10:15.500 に答える