2

デモ： http： //jsfiddle.net/sunnycpp/fMXyP/5/

連続したshow、hide呼び出しはバグを生成し、アニメーションは停止し、時々再開しません。これはjQueryのバグですか、それとも私のコードのバグですか？

これがjsfiddleからコピーペーストされたコードです。

myButtonManual.on("click", function() {
  isVisible = !isVisible;      
  myHero.stop(true,false);      
  if(isVisible) {        
    myHero.show('slow');
    myButtonManual.text("Manual Hide");
  } else {        
    myHero.hide('slow');
    myButtonManual.text("Manual Show");
  }

ここに画像の説明を入力してください

4

1 に答える 1

2

それはバグではありません。

この行を見てください：

myHero.stop(true,false);

.hide()アニメーションの最後にジャンプせずに途中で停止すると、表示されている要素はそのまま残りvisibleます。

aを実行すると要素が表示されたままになるため、ロジックisVisible = !isVisibleが壊れます。つまり、ハンドラーへの次の呼び出しは、まったく効果のない要素に対して実行されます。.stop()hide().show()visible

回避策は次のとおりです。

  • を削除し.stop()ます。これにより、がキューに入れshow()られ、終了後に実行hide()されます。

  • .stop(true)-と同等の-を使用.stop(true, true)します。これは、次のアニメーションが突然開始されるときにアニメーションを強制的に終了させるため、かなり鈍くなります。

編集： andメソッド.toggle()を使用して-のような動作を再現する最も近い方法は、呼び出す前に単に追加することです。これにより、目的の効果が確実に得られます。.show().hide().css('display', 'none').show().show()

isVisible = !isVisible;
myHero.stop(true, false);
if (isVisible) {
  myHero.css('display', 'none').show('slow');
} else {
  myHero.hide('slow');
}

フィドル

要素がすでに非表示になっている場合、は.css効果がありません。要素が部分的に表示されている場合は.show()、要素が考慮されているために無視されるのではなく、実行されるように非表示になりvisibleます。

これは、と同じ効果がありますが、要求に応じ.stop(true, false).toggle()て2つの異なる.show()/メソッドを使用して機能します。.hide()

于 2013-01-18T13:57:03.073 に答える