Correlating scripts on the same element issue in Jquery

0 Views

I have two scripts that hit the same element. 

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

This one animates all the products on load (each one separetely with small delay)

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

This one works on hover of the same. It’s like a highlight script.

The thing that happens is that If you target the image during their “flying in” from the first script the .stop() from the 2nd script will stop them and it becomes a mess.

I had an impression that $(window).load will take care of that. What other way can I delay sort of the script. Like say wait 10 second after page load then start working.

Post Views: 0

Related posts

Leave a Reply

3 comments

  1. Use two flags of each count

    var falg1 = 0;

    Each loop flag1++;

    On mouse enter or mouse leave return if flag1 < $(“.selector”).length(), jquery rule what you used to loop.

    Same for loop2

    Update

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

    This should be it. You exit from mouse event if animations loops are incomplete.

    Update:

    Only one flag required because first loop of delay do not interfere with mouse enter or leave:

    Check your updated fiddle: http://jsfiddle.net/95kke201/1/

  2. You can set the mouse events after the last animation completes:

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

    I made this snippet of top of my head, so I didn’t tested it. This is the far safer method to use since you don’t need to trust timeouts neither flags(that can mess your code).

  3. you can either set a timer on window load event, something like:

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

    or you could trigger an event once the first set of animations is done, lets say – ‘firstAnimationsSetFinished’, and bind the second mouseEnter and mouseLeave events once to this event instead to widget load.

    creating a custom event – http://api.jquery.com/category/events/event-object/