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

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

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

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

这一个同样适用于悬停。这就像一个精彩的脚本

发生的事情是，如果在第一个脚本的“飞入”过程中以图像为目标，第二个脚本的.stop（）将阻止它们，图像将变得一团糟

---

我有一个印象，$（窗口）。加载将处理这个问题。还有什么别的方法可以延迟这类脚本呢。比如说，页面加载后等待10秒，然后开始工作。

使用每个计数的两个标志

var falg1=0

每个循环标记1++

如果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...
        })

var flag1=0；
var flag2=0；
$（“.product type simple”）。每个（功能（i）
{
flag1++；
...
});
$（“.product type simple”）。每个（功能（i）
{
flag2++；
...
});
$（'.woocmerce ul.products li.product'）。on（'mouseenter'，function（）{
if（flag1<$（“.product type simple”）.length（flag2<$（“.product type simple”）.length）返回；
//做些事情。。。
}).on（'mouseleave'，function（）{
if（flag1<$（“.product type simple”）.length（flag2<$（“.product type simple”）.length）返回；
//做些事情。。。
})

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

更新：

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

---

检查更新的小提琴：

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

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

---

我在头顶上做了这个片段，所以我没有测试它。这是一种安全得多的方法，因为您不需要信任超时或标志（这会弄乱代码）。

您可以在窗口加载事件上设置计时器，例如：

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

或者，您可以在第一组动画完成后触发一个事件，比如-'FirstAnimationSetFinished'，并将第二个mouseEnter和mouseLeave事件绑定到此事件，而不是加载小部件

---

创建自定义事件-

我不认为用户等待10秒直到动画停止才能与您的页面交互是一件好事。它甚至可以是5秒（大约加载所有产品所需的时间）。因此，您对我说的是，我将加载的产品计数到一个变量中，然后检查该变量是否大于10，然后它应该开始工作？是的，很抱歉双重发布和格式不正确，但我的浏览器在提交时崩溃。产品的长度（数）不是等于flag1吗？因为我为每个产品制作动画。事实上，我想这些课可能把你弄糊涂了。我使用了不同的动画类，它们与我所有的产品相关。产品类型与ul.products li.products相同。您可以在两个函数中使用同一个类。@SilentTremor忘记了@You@NikolaL。如果你说循环步数等于difrent jquery选择规则，你可以自由使用它。我们的想法是将事件附加到您的产品上，但在鼠标上不激活动画。飞行动画有效，但悬停无效。“我也在看，试图找到绊脚石。”尼古拉。对不起，我不明白你的意思。想要制作一个JSFIDLE来帮助我们吗？试图找出代码中的悬停不起作用的原因。我就是这么说的。我明天要做一个jsfiddle。给你：。主要问题是脚本#2中的stop（）函数。（我忘了在初始线程中添加它）。但它必须有它，因为否则高光动画是草率的，如果垃圾邮件，它会疯掉。@NikolaL。我不知道你为什么不尝试我的解决方案，但是它可以工作，并且使用一个回调和一个

每个
，没有控制变量和那些废话的干净代码。在这里签出：。不管怎样，祝你好运。我试过了，但没用。不透明度的悬停效果永远不会“在线”。
(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);