15

マウスを画像の上に置くと、要素が表示されるサイトを作成しています (この場合は、高さを 0 から 154 ピクセルに拡大します)。

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseover(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseout(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200);
    });
});

マウスが入るとコンテンツが展開し、マウスが離れるとコンテンツが折りたたまれますが、マウスが要素内で移動するたびに、マウスが要素から離れるまで、コンテンツの展開と折りたたみが繰り返されます。

以前にこの問題が発生したことはなく、過去にこれらの機能を使用したことがあるので、何が起こっているのか途方に暮れています。何か案は？

編集：

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseleave(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"0"},200);
    });
});

上記のコードを使用していますが、まったく同じ問題が発生しています。.stop 関数 (false,false)(false,true)(true,false)(true,true) のすべてのバリエーションを試しました。問題はそれぞれ異なる方法で発生しますが、それでも発生します。

究極の編集：

問題は、関数が呼び出されると、マウスが移動したコンテンツが別のコンテンツによって隠されることでした。したがって、任意の時点で、マウスは同時に画像に出入りしていました。関数呼び出しを別の要素に移動することで問題を解決しました。

4

5 に答える 5

12

.mouseover の代わりに.mouseenterイベントを使用してみてください

それでいいと思います！

于 2012-04-09T21:25:50.147 に答える
6

mouseenterの代わりにmouseoverおよびmouseleaveの代わりに使用する必要がある場合がありますmouseout

.hoverまたは、以下のように関数を試して使用することもできます。

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").hover(function(){ //mouseenter
        jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200);
    }, function(){ //mouseleave
        jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200);
    });
});
于 2012-04-09T21:26:18.540 に答える
3

これをコンテナに実装しようとしているので、正しいイベント ハンドラはmouseenterとmouseleaveです。

例：

$("#dropdown-menu-create .dropimage").mouseenter(function(){
    $("#dropdown-menu-create .toggle").animate({height:"154px"},200);
});
$("#dropdown-menu-create .dropimage").mouseleave(function(){
    $("#dropdown-menu-create .toggle").animate({height:"0"},200);
});
于 2012-04-09T21:27:32.970 に答える
2

.animate() の前に .stop() を追加すると、これを修正するのに役立ちます。前のアニメーションを停止することで、ユーザーが要素の上にマウスをすばやく何度も移動した場合に、アニメーションが複数回発生するのを防ぎます。

于 2012-04-09T21:25:43.507 に答える