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＆lt; $（＆＃34; .selector＆＃34;）。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://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

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

(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中相同元素问题的脚本

3 个答案: