Run animation when element is visible on screen

Question

I've a little progress bars script. It works fine but runs on page load. I want to run animation when bars are visible on screen (it should work too if progress bars would be in tabs). How may I get this?

Here's script:

setTimeout(function(){

    $('.skill-bar .skill-bar-content').each(function() {
        var me = $(this);
        var perc = me.attr("data-percentage");

        var current_perc = 0;

        var progress = setInterval(function() {
            if (current_perc>=perc) {
                clearInterval(progress);
            } else {
                current_perc +=1;
                me.css('width', (current_perc)+'%');
            }

            me.text((current_perc)+'%');

        }, 10);

    });

},10);

jsFiddle: http://jsfiddle.net/fUyYL/

i think this answer will resolve your issue: http://stackoverflow.com/questions/6689793/how-can-i-force-jquery-animations-to-occur-when-the-window-is-not-focused — Amine ABDALKHALKI, Jan 25 '13 at 12:19
It doesn't work as I want to be serious so I'd try other solution. — eXorcist, Jan 25 '13 at 12:35

score 0 · Accepted Answer · answered Jan 25 '13 at 12:16

0

Something like this? http://jsfiddle.net/fUyYL/1/

var ele = $('#skill-bars');
if( ele.is(':visible') ) {
    ...
}

answered Jan 25 '13 at 12:16

Barlas Apaydin

7,233
11
55
86

@eXorcist because element's css got `display:none`, when removed http://jsfiddle.net/fUyYL/2/ – Barlas Apaydin Jan 25 '13 at 12:35
animation work without scrolling, wait few seconds and scroll and you will see animation finished, add more pixels for top margin , wait and then scroll – khaled_webdev Feb 05 '14 at 12:51

Run animation when element is visible on screen

1 Answers1

Linked