Question

I made some script to make a countdown on my site, it loops on all deadline classes and changes the clock.

Here’s the code

self.setInterval(function(){
$('.deadline_container').each(function(){
    days = parseInt($(this).children('.deadline_days').html(),10);
    time = $(this).children('.deadline_time').html().split(':');
    hours = parseInt(time[0],10);
    minutes = parseInt(time[1],10);
    seconds = parseInt(time[2],10);
    if(seconds > 0){
        seconds -= 1;
    } else if(minutes > 0){
        minutes -= 1;
        seconds = 59;
    } else if(hours > 0){
        hours -= 1;
        minutes = 59;
        seconds = 59;
    } else if(days > 0){
        days -= 1;
        hours = 23;
        minutes = 59;
        seconds = 59;
    }
    sec = (seconds < 10) ? '0' + seconds : seconds;
    min = (minutes < 10) ? '0' + minutes : minutes;
    hh = (hours < 10) ? '0' + hours : hours;
    $(this).children('.deadline_days').html(days);
    $(this).children('.deadline_time').html([hh,min,sec].join(':'));
});
}, 1000);

I have some code too to show an overlay on a div when hovering it

$('.someDivClass').live({
    mouseover: function() {
        $(this).children('.background').children('.overlay').stop().animate({opacity:"1"}, 300);
    },
    mouseout: function() {
         $(this).children('.background').children('.overlay').stop().animate({opacity:"0"}, 300);
    }
});

That two pieces of code works great, there isn’t any problem with the animations, the problem is that when the interval is running and I hover one of the divs with overlay, the overlay animation freezes until the countdown ticks one second. Sometimes it looks like there’s no animation and just the overlay appears from sudden. Sometimes looks good, it all depends on the instant when I hover the div. I think the setInterval function stops the animation queue until it stops executing it’s own code.

I think there’s no threading on jquery or something similar.

So the questions are:

¿How can I make my overlays animations smooth without depending of the clock interval?

¿Is there a more efficient way to do my countdown or overlay animations?

I’m using jquery 1.8.2 and jQuery UI 1.9.0

Edit

I didn’t realize it before, I have an opacity change too, like this:

$('#top_bar, #top_bar_container').hover(
    function(event){
        $(this).stop().animate({backgroundColor:"rgba(0,0,0,0.5)"}, 300);
    },
    function(event){
        $(this).stop().animate({backgroundColor:"rgba(0,0,0,0.2)"}, 1000);
    }
);

That animation runs smoothly no matter what!
So it could be the live function (I need it as I add content to the page with AJAX) or the opacity animation against the background animation (could be more expensive on CPU terms)

Any help would be appreciated, thanks.

Edit
Here’s my DOM

<div class="someDivClass">
    <div class="background">
        <div class="overlay">
            <div class="deadline">
                <div>Time Left</div>
                <div class="deadline_container">
                    <div class="deadline_days">14</div>
                    <div class="deadline_time">23:20:51</div>
                    <div style="clear:both;"></div>
                </div>
            </div>
        </div>
    </div>
</div>  

I have a lot of this containers on my page.

Answer 1

I solved this.
Actually it wasn’t a jQuery animate or javascript setInterval() problem, it was Google Chrome itself.

I tried this:

As philipp said, I changed the first code to setTimeout()

I changed the .live() to $(document).on(‘mouseover’, ‘.someDivClass’, function(){…});

But none of this solved the problem, so testing things here and there I optimized the images on my site, and it was solved!

What I think that happens:
Chrome has problem rendering animated divs with opacity background on top of LARGE images, because when I made the .background class image smaller the animation lag dissapeared.

I tested the code I had at the beginning on Firefox 15.0.1 and there was no lag at all.

Thanks for the answers anyway, I don’t have problems with animations anymore