3

このようなページレイアウトがあります

|    image    ||    image    ||    image    |

画像の1つにカーソルを合わせると、このようなアニメーションが得られます

|     image-hover     ||  image  ||  image  |

また

|  image  ||     image-hover     ||   mage  |

また

|  image  ||  image  ||     image-hover     |

を使用しましたが.animate({width: width}, speed)、問題なく動作します。しかし、私を悩ませていることが 1 つあります。アニメーションが同期していません。その結果、右の境界線が前後にちらつきます。アニメーションの途中で、全体の幅が本来よりも約 3 ピクセル細くなっています。

速度を微調整してみましたが、ちらつきには役立たず、アニメーション全体に大きな改善は見られませんでした.

違いがある場合は、タグを使用divsしてタグbackground-imageをoverflow: hidden;ラップしていliます。と の両方liをdiv広くしています (liタグにはテキストも保持されます)。

実際の問題:
アニメーションを同期させることは可能ですか?

コード： 

$(this).animate({width: 450}, 495)
    .parent("li").animate({width: 450}, 495)
    .next("li").animate({width: 225}, 500)
    .find(".class").animate({width: 225}, 500)
    .parent("li").next("li").animate({width: 225}, 500)
    .find(".class").animate({width: 225}, 500);

最初にトラバースを行い、要素を 2 つの変数 (大きくする変数と小さくする変数) に割り当ててみましたが、実際には改善されませんでした。

4

2 に答える 2

3

そこでのキュー構築の問題について言及していると思います。stopメソッドの前にメソッドを使用してみてくださいanimiate。

$(...).stop().animate({width: width}, speed)

より詳しい情報：

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

スムーズなアニメーションについては、jQuery Easing Pluginを使用できます。

于 2010-07-22T07:54:31.833 に答える
1

アニメーションの途中で、全体の幅が本来よりも約 3 ピクセル細くなっています。

イージングをリニアに設定してみてください。

于 2010-07-22T07:56:23.570 に答える