1

私は実際に、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/

4

1 に答える 1

-1

.hoverを使用してみてください:ホバードキュメントhttp://api.jquery.com/hover

このようなもの :

$("#divToBeHoveredOn").hover(
           function()
           { 
                 // content to show
           },
           function() 
           { 
         //content to hide }
        );
于 2013-01-24T00:35:47.657 に答える