3

単純なマウスの入力とマウスの離脱のアニメーションを作成します。マウスでdivを入力すると。リンク div よりも開いています。マウスアウトすると、div が閉じます。私はslideUpとslideDownでアニメーションを設定しています。

アニメーションに問題があります。ページにはたくさんの .comment div があります。アイテムにすばやくカーソルを合わせたとき。スライドアニメーションがおかしくなり、アニメーションが何度も表示されます。どうすれば修正できますか？ありがとう！

$("#comments .comment .links").hide();
$("#comments .comment").mouseenter(function() {
    $(".links",this).slideDown(300);
}).mouseleave(function() {
    $(".links",this).slideUp(300);
});
4

3 に答える 3

6

stop(true)各イベントのアニメーションキューをクリアするために使用します。

$("#comments .comment .links").hide();
$("#comments .comment").mouseenter(function() {
    $(".links",this).stop(true).slideDown(300);
}).mouseleave(function() {
    $(".links",this).stop(true).slideUp(300);
});

また、次を使用してこのコードを凝縮することもできますhover()。

$("#comments .comment .links").hide();
$("#comments .comment").hover(
    function() { $(".links", this).stop(true).slideDown(300); },
    function() { $(".links", this).stop(true).slideUp(300); }
);
于 2012-05-09T09:34:02.203 に答える
0

ここで同じ問題！

$("#spezial_navi_btn_20").mouseenter(関数() {

    $("#content").stop(true).fadeOut("slow");
    $("#spezial_navi").css('background-image', 'url(http://#)');
    $("#spezial_navi_20").stop(true, true).slideUp("fast");
    $("#spezial_navi_desc_20").stop(true, true).slideDown('slow', function() {
        $("body").ezBgResize({
        img : "http://#",
        opacity : 1,
        center  : true 
        });
    });
    $("#spezial_navi_desc_30").stop(true, true).slideUp('slow');
    $("#spezial_navi_30").stop(true, true).slideDown('slow'); 
    $("#spezial_navi_desc_40").stop(true, true).slideUp('slow');
    $("#spezial_navi_40").stop(true, true).slideDown('slow'); 
});

解決しました!! 代わりに: $("#spezial_navi_20").stop(true, true).slideUp("fast"); そして: $("#spezial_navi_desc_20").stop(true, true).slideDown('slow', function() { やった: $("#spezial_navi_20").slideUp("fast"); そして: $(" #spezial_navi_desc_20").slideDown('slow', function() {

于 2012-12-13T10:26:20.923 に答える