javascript - 关联 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);

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

发生的事情是，如果您在图像从第一个脚本“飞入”期间瞄准图像，第二个脚本中的 .stop() 将停止它们，它变得一团糟。

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

Answer 1

每个计数使用两个标志

var falg1 = 0;

每次循环flag1++;

如果 flag1 < $(".selector").length()，在鼠标进入或鼠标离开返回时，jquery 规则您用来循环的内容。

循环2相同

更新

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/