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

Correlating scripts on the same element issue in Jquery

本文关键字：关联 脚本 问题 元素 于同一 Jquery      更新时间：2023-09-26

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

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秒，然后开始工作。

使用每个计数的两个标志

var falg1=0；

每个循环标志1++；

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

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

更新：

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

检查您更新的小提琴：http://jsfiddle.net/95kke201/1/

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

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事件绑定到该事件一次，而不是绑定到小部件加载。

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

相关文章：