私は実際に、jquery(1.8.3)を使用して、ホバー上の別のdivでdivを表示/非表示にしようとしています。jqueryui(1.9.2)の「パフ」効果があります。これが私のHTMLです:
<li id="category_1">
<div class="item_menu">
<img src="image.jpg"/>
<div class="titre" style="display:none;">menu title</div>
</div></li>
<li id="category_2">
<div class="item_menu">
<img src="image.jpg"/>
<div class="titre" style="display:none;">menu title</div>
</div></li>
...
そしてここに私のjsがあります:
$(".item_menu").mouseenter(function(){
$(this).children(".titre").show("puff");
}).mouseleave(function(){
$(this).children(".titre").hide("puff");
});
問題は、アニメーションが終了する前にマウスアウトが発生すると、.titredivが非表示にならないことです。
stop()で処理したり、toggle()でアニメーション化したり、mouseenter / mouseleveの代わりにhover()を使用したりするなど、さまざまな方法を試しましたが、常に同じようにレンダリングされます。私はこれを一度試しました:
$(".item_menu").mouseenter(function(){
$(".titre").show("puff");
}).mouseleave(function(){
$(".titre").hide("puff");
});
驚いたことに、それは魅力のように機能しましたが、クラスが指すメニューのアイテムなので、もちろん、ホバーされたアイテムではなく、すべてのアイテムを表示/非表示にします...だから、私は思います$(this).childrenのものに問題があります...(他のjquery ui効果のように)jquery ui "puff"効果を使用しない場合、それも機能します...しかし、使用するように要求されますこの特定の効果。したがって、私の問題は$(this).childrenの組み合わせとjqueryuiエフェクトの使用に起因すると思います。
このメニューは動的に生成されるため、IDを持つアイテムを実際にポイントして、簡単に取得することはできません...
フィドル: http: //jsfiddle.net/EECW8/6/