jQueryでプルダウンメニューを実装したときの話です。
プルダウンメニューにjQueryのslideDownとslideUpでプルダウンメニューを作成し、マウスを載せてホバー状態にさせてみると挙動がおかしい。アニメーションが表示されないんですね。
本来なら「ヌルッ」としたスライドのアニメーションになるのですが。マウスホバーで「パッ」と表示され、マウスアウトで「パッ」と消える。そのときのjQueryのソースコードは以下です。
$('#nav li .sub-menu').hide();
$('#nav li').hover(function(){
$('>ul:not(:animated)', this).slideDown('normal');
}, function() {
$('>ul', this).slideUp('normal');
});「sub-menu」のクラスが付与されたulをアニメーションさせたいワケなのです。それで、このバグは僕の場合、ulタグにCSS3の「transition」を設定していたのが原因でした。もしtransitionが設定されていたら削除して下さい。
jQueryでアニメーションさせるのに、わざわざCSSでもアニメーションを設定する必要はありませんからね。（なんで付けてたんだ）
ちなみに上記ソースコードはこちらの本を参考にしていています。
それでも解決しないなら…
その他にも原因が幾つかあるようで、せっかくなので別の場合の解決策が書かれたページを参考に貼っておきます。CSSが大体悪さをしていることが多いようなので、まずCSSのプロパティを疑ってみるのが良いかもしれません。
jQuery slideUp slideDownがうまく動かない現象 | なんでも独り言