6

私は2つの別々のアニメーションを実行しています。1つはでもう1つは発火しmouseenterますclick。問題は、両方をアクティブにすると、ジャンプするアニメーションが作成されることです。

あなたは私がここで意味することを見ることができます：JSFiddle

イベントがアクティブ化されmouseenterた場合、イベントの発生を防ぐことはできますか？click

Javascript

$('header h1').mouseenter(function() {
  $('header:not(.open)').delay(500).animate({
    'padding-bottom': '40px'
  }, 150, function() {
    //function complete
  });
});

$('header h1').mouseleave(function() {
  $('header:not(.open)').animate({
    'padding-bottom': '20px'
  }, 150, function() {
    //function complete
  });
});

$('header h1').click(function() {

  if ($('header').hasClass('open')) {
    $('header p').fadeOut(100);
    $('header').removeClass('open').animate({
      'padding-bottom': '20px'
    }, 300, function() {
      //animation complete
    });
  }

  else {
    $('header').addClass('open').animate({
      'padding-bottom': '150px'
    }, 300, function() {
      $('header p').fadeIn();
    });
  }

});​
4

4 に答える 4

4

これを行う方が簡単なようです：

$('header').on({
    mouseenter: function(e) {
        if (!$(this).is('.open')) {
            $(this).stop(true, true).delay(500).animate({'padding-bottom': '40px' }, 150, function() {
                //function complete
            });
        }
    },
    mouseleave: function(e) {
        if (!$(this).is('.open')) {
            $(this).stop(true, true).animate({'padding-bottom': '20px'}, 150, function() {
            //function complete
            });
        }
    },
    click: function() {
        if ($(this).is('.open')) {
            $(this).find('p').fadeOut(100).end().removeClass('open').stop(true, true).animate({'padding-bottom': '20px'}, 300, function() {
                //animation complete
            });
        }else{
            $(this).addClass('open').stop(true, true).animate({'padding-bottom': '150px'}, 300, function() {
                $('p', this).fadeIn();
            });
        }
    }
});​
于 2012-05-28T18:47:59.730 に答える
2

いいえ、できません。特に、これらのイベントは相互に基づいているため、要素をクリックするには、マウスで入力する必要がありenterます。クリックしたときにすでに発生したイベントを非アクティブ化することはできません。そして、あなたは明らかにclick、入るときに将来のイベントを非アクティブ化するべきではありません。

ジャンプアニメーションに関する問題の解決策は、選択した要素でのアニメーションの実行を終了するstop()メソッドである必要があります。

于 2012-05-28T18:21:01.277 に答える
0

open遅れてクラスをチェックしてみませんか。

からの変更

$('header h1').mouseenter(function() {
  $('header:not(.open)').delay(500).animate({
    'padding-bottom': '40px'
  }, 150, function() {
    //function complete
  });
});

に

$('header h1').mouseenter(function() {
  $.delay(500);
  $('header:not(.open)').animate({
    'padding-bottom': '40px'
  }, 150, function() {
    //function complete
  });
});

もちろん、遅延を好みに合わせて微調整することもできますが、アイデアは次のようになります。

ミリ秒前にクリックしない場合はx、パディングを増やします。

于 2012-05-28T18:21:23.420 に答える
0

必要なようですね.stop()。

clickこれをイベントの先頭に追加します。

$('header').stop(true)

trueの最初のパラメータはclearQueue、です。これにより、アニメーションキューがクリアされます。

このjsFiddleを参照してください。

于 2012-05-28T18:23:43.413 に答える