0

マウスが外れたときに div をスライドして開始位置に戻したいのですが、マウスが再び div に戻ると、div がそのアクションをキャンセルして展開された位置に戻るようにします。

このアクションを停止するには、何らかの方法が必要です。

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

これがフィドルです：http://jsfiddle.net/gaPah/6/

4

2 に答える 2

2

.stop()はあなたの問題に対する答えです!

アニメーションをすばやく終了するのではなく、その場で停止したいので、

.stop(true, false)

あなたの要素に。

これはあなたのケースに適用された stop() のデモです: http://jsfiddle.net/Ma5Xt/1/

これは遅延を追加した例です: http://jsfiddle.net/Ma5Xt/2/

最後に、これは、終了アニメーションが現在実行されている場合にのみ、mouseenter での展開を許可します。それ以外の場合は、div をクリックして再度開く必要があります: http://jsfiddle.net/Ma5Xt/3/

于 2013-01-09T20:24:02.023 に答える
1

わかりました、ついにこれの底に達しました。ユーザーのクリック数が切り替わりました。ディビジョンが開きます。ユーザーは div を離れます。700ミリ秒待ってから閉じます。ユーザーが閉じるのを中断すると、再び開きます。ユーザーが中断しない場合は、リセットされます。

注意。.delay()うまくいかない.animate()ので複雑になりますが、これを行う簡単な方法があると確信しています。

openmeまた、同じアニメーション行を 2 回 (マウスオーバーで 1 回、ボタンのクリックで 1 回) 書き込まないようにカスタム イベントをバインドしたことにも注意してください。

ワーキングデモ

$('#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);
});
于 2013-01-09T20:33:56.253 に答える