2011-08-10 8 views
2

私はdivを持っていて、2番目の画像が上にスライドし、マウスがそのスライドを元の位置に戻すと、アニメーションはまさに私が望むものですが、アニメーションはバグを終わらせ、アニメーションを離れた高さにのみ移動します。すべてのヘルプは、その上に日別のブログを見られて本当に参考になると私は修正を見つけることができないよう、私はプロトタイプとここsciptaculousを使用していますと、私のコードです:slideUp slideDownアニメーションエラー

$('mid_about_us').observe('mouseenter',function() { 
$('about_us_mo').slideDown({duration: 0.5}); 
}); 
$('mid_about_us').observe('mouseleave',function() { 
$('about_us_mo').slideUp({duration: 0.5}); 
}); 

#about_us_mo{ 
position: absolute; 
float: left; 
bottom: 452px; 
left: 4px; 
z-index:99999; 
overflow: hidden; 

}

答えて

1

ますScriptaculous Effects Queueを使用する必要があります。

ハンドラは、イベントが発生するとすぐに即座に非同期で起動します。したがって、イベントが非常に迅速に発生すると、ハンドラは重複して競合します。あなたが本当に望んでいるのは、キューに並べて、前のキューが終了するとすぐに順番に実行することです。

ここではそれについては本当に良い記事があります:
http://script.aculo.us/docs/EffectQueues.html

あなたのコードは次のようになります。

$('about_us_mo').slideDown({duration: 0.5, queue: 'end'}); 

あなたが行うもでき、彼らはお互いに干渉している場合、複数のエフェクトキューを作成するようなもの。記事はそれをすべて説明するうまい仕事です。

HTH -Ken

関連する問題