[WordPress] Jquery で同じ要素問題にスクリプトを関連付ける

スポンサーリンク

質問

同じ要素を打つ 2 つのスクリプトがある

jQuery(document).ready(function($) {
    $(".product-type-simple").each(function(i) 
    {
        $(this).delay((i++) * 100).css({
            marginLeft: '-=150px',
            marginTop: '-=150px',
            opacity: '0',
        });
    });

    $(".product-type-simple").each(function(i) 
    {
        $(this).delay((i++) * 100).animate({
            marginLeft: '+=150px',
            marginTop: '+=150px',
            opacity: '1'
        }, 300);
    });
});

すべての製品の負荷 (小さい遅れ 1 つ各 separetely) 動く

(function($) {
    $(window).load(function() {
        $('.woocommerce ul.products li.product').on('mouseenter',function(){
            $(this).siblings().animate({
                'opacity' : 0.5,
            },500);
        }).on('mouseleave', function(){
            $(this).siblings().animate({
                'opacity' : 1,
            },500)
        })
    })
 })(jQuery);

この 1 つは同じのホバー動作します。ハイライトのようなものだスクリプト

が起こるかは、画像中に彼らの「フライングで」対象とする場合、最初のスクリプトからこと第 2 のスクリプトから .stop() はそれらを停止し、混乱になります

その $(ウィンドウ) .load はそれの世話を印象を持った。どのような他の方法、スクリプトを遅らせることができます。言うページの読み込み後 10 秒を待ってから作業を開始するよう

答え

それぞれのカウントの 2 つのフラグを使用する

var falg1 = 0;

各ループ フラグ 1 + +;

マウス入力またはマウスのリターンを残す場合は [フラグ 1] < $(”.selector”).length()、jquery のループを使用したルールします

答え

いずれか何かのようなウィンドウの load イベントにタイマーを設定できます:

(function($) {
    $(window).load(function() {
        widnow.setTimeout(function(){
            $('.woocommerce ul.products li.product').on('mouseenter',function(){
                $(this).siblings().animate({
                    'opacity' : 0.5,
                },500);
            }).on('mouseleave', function(){
                $(this).siblings().animate({
                    'opacity' : 1,
                },500)
            });
        }, 10000);
    })
})(jQuery);

イベントをトリガーすることができるまたはアニメーションの最初のセットが完了したら、言う – ‘firstAnimationsSetFinished’ とウィジェットの負荷を代わりにこのイベントを 1 回目 mouseEnter と mouseLeave イベントをバインドすることができます

作成するカスタム イベント – http://api.jquery.com/category/events/event-object/

答え

イベント最後のアニメーションが完了した後にマウスを設定することができます:

jQuery(document).ready(function($) {
    var productTotal = $(".product-type-simple").length - 1;

    $(".product-type-simple").each(function(i) 
    {
        var options = {
            duration: 300
        };

        // Check if this is the last product and set the completion callback
        if (i == productTotal)
        {
            options.complete = setMouseEvents;
        }

        $(this).delay((i++) * 100).css({
            marginLeft: '-=150px',
            marginTop: '-=150px',
            opacity: '0',
        }).animate({
            marginLeft: '+=150px',
            marginTop: '+=150px',
            opacity: '1'
        }, options);
    });
});

var setMouseEvents = function()
{
    $('.woocommerce ul.products li.product').on('mouseenter',function(){
        $(this).siblings().animate({
            'opacity' : 0.5,
        },500);
    }).on('mouseleave', function(){
        $(this).siblings().animate({
            'opacity' : 1,
        },500)
    });
};

それをテストしていないので、私の頭の上のこのスニペットを作った。これはタイムアウト (つまり、コードを混乱することができます) どちらのフラグを信頼する必要はありませんので、使用するはるかに安全な方法です

答え

それぞれのカウントの 2 つのフラグを使用する

var falg1 = 0;

各ループ フラグ 1 + +;

マウス入力またはマウスのリターンを残す場合は [フラグ 1] < $(”.selector”).length()、jquery のループを使用したルールします

Loop2 の同じ

更新プログラム

var flag1 = 0;
var flag2 = 0;

    $(".product-type-simple").each(function(i) 
        {
         flag1++;
         ...
    });
    $(".product-type-simple").each(function(i) 
        {
         flag2++;
        ...
    });
$('.woocommerce ul.products li.product').on('mouseenter',function(){
               if (flag1 < $(".product-type-simple").length || flag2 < $(".product-type-simple").length) return;            
                // do stuff...
        }).on('mouseleave', function(){
            if (flag1 < $(".product-type-simple").length || flag2 < $(".product-type-simple").length) return;
            // do stuff...
        })

これはそれをする必要があります。アニメーションのループが完了した場合にマウス イベントから終了します

http://stackoverflow.com/questions/28306725/correlating-scripts-on-the-same-element-issue-in-jquery

スポンサーリンク

Leave a Reply