0

I have some Jquery that applies to a loading bar but I'd like the loading bar not to fill until its within view, is there anyway to do this? Th Jquery that controls the loading bar is below, if you need the CSS, HTML, or a jsfiddle example of the current loading bar let me know. Any help is greatly appreciated! 

  $('.bar-percentage[data-percentage]').each(function () {
  var progress = $(this);
  var percentage = Math.ceil($(this).attr('data-percentage'));
  $({countNum: 0}).animate({countNum: percentage}, {
    duration: 2000,
    easing:'swing',
    step: function() {
      // What todo on every count
    var pct = '';
    if(percentage == 0){
      pct = Math.floor(this.countNum) + '%';
    }else{
      pct = Math.floor(this.countNum+1) + '%';
    }
    progress.text(pct) && progress.siblings().children().css('width',pct);
    }
  });
});
Tyharo
  • 383
  • 2
  • 5
  • 23
  • Get the `offset` from top of document of the required element. http://api.jquery.com/offset/ Then listen to `scroll` and figure out the `scrollTop` value http://api.jquery.com/scrolltop/ and make a comparison, if they are within your specific parameters, only then start the animation. – Rob Schmuecker Aug 05 '14 at 20:14

1 Answers1

4

I had written a similar code for counters before and change it as you want, this is a code that each element start an animation just when appear on screen:

function isElementVisible($elementToBeChecked)
{
    var TopView = $(window).scrollTop();
    var BotView = TopView + $(window).height();
    var TopElement = $elementToBeChecked.offset().top;
    var BotElement = TopElement + $elementToBeChecked.height();
    return ((BotElement <= BotView) && (TopElement >= TopView));
}

$(window).scroll(function () {
    $( ".bar" ).each(function() {
        $this = $(this);
        isOnView = isElementVisible($(this));
        if(isOnView && !$(this).hasClass('Starting')){
            $(this).addClass('Starting');
            startAnimation($(this));
        }
    });
});

function startAnimation($this) {
  $this.animate({
    width: "100%"
  }, 3000, function() {
    // Animation complete.
  });
}

The isElementVisible function help to find out is a control appeared on the screen after every scroll or not.

Then you call this function on every scroll and if a .bar element appears on display, then start animation ONLY for THIS element using the startAnimation function.

The !$(this).hasClass('Starting') is added to code to prevent unwanted call function, when an animation start for first time, the Starting class is added to element and is skipped in next times.

See in Action: >>> JSFiddle

Community
  • 1
  • 1
Moshtaf
  • 4,833
  • 2
  • 24
  • 34
  • I'm not very familiar with jQuery, how would I merge this with my current jQuery? I understand where I would place my animation but my animations isnt a simple this.animate – Tyharo Aug 05 '14 at 20:38
  • You don't need to modify two first blocks, only set `.bar` class for element that you want to be animated and put your main code in `startAnimation` function. This function is called when an element appear on screen, so do what you want when it appear in `startAnimation` function. You don't put your complete code and don't provide a JSFiddle, it's a very high expect to get the exact answer. although i think it's a very close and clean answer and you can't find a better one probably. – Moshtaf Aug 05 '14 at 20:47