Jquery 中同一元素问题的关联脚本

Question

我有两个脚本命中同一个元素。

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);
    });
});

这个动画加载所有产品（每一个都有小延迟）

(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);

这一个适用于相同的悬停。这就像一个高亮脚本。

发生的事情是，如果您在第一个脚本 "flying in" 期间将图像作为目标，第二个脚本中的 .stop() 将停止它们并变得一团糟。

我的印象是 $(window).load 会解决这个问题。还有什么其他方法可以延迟某种脚本。比如在页面加载后等待 10 秒然后开始工作。

Answer 1

每个计数使用两个标志

var falg1 = 0;

每次循环flag1++;

在鼠标进入或鼠标离开时 return 如果 flag1 < $(".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...
        })

应该是这样。如果动画循环不完整，您将退出鼠标事件。

更新：

只需要一个标志，因为第一个延迟循环不会干扰鼠标进入或离开：

检查更新后的 fiddle：http://jsfiddle.net/95kke201/1/

Answer 2

您可以在最后一个动画完成后设置鼠标事件：

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)
    });
};

这段代码是我在脑海中截取的，所以我没有测试它。这是更安全的使用方法，因为您不需要信任超时和标志（这会弄乱您的代码）。

Answer 3

您可以在 window 加载事件上设置一个计时器，例如：

(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'，并将第二个 mouseEnter 和 mouseLeave 事件一次绑定到该事件而不是小部件加载。

创建自定义事件 - http://api.jquery.com/category/events/event-object/

Jquery 中同一元素问题的关联脚本

Correlating scripts on the same element issue in Jquery

javascript

wordpress

jquery