CODEWITHSUNDEEP
javascriptjqueryanimation
ja0b
ja0b

Reputation: 1

Animation ( bar fills up over time ) with Jquery (Suggestion)

I would like to replicate the same functionality as at ign.com, where the indicator bar fills up over time. I got it working but I got some sync issues after a while. So i'm open to suggestions to do it from scratch (I'm beginner with all this animation stuff).

This is the code.

function GoProgressBar() {

    var $lineStatus = $('.featured-articles-line-status');

    $lineStatus.css('width', '0px');
    $lineStatus.animate({ width: '694px' }, 12000, 'linear', GoProgressBar);

};

function GoOverlay(width, isLast, currentWidth) {

    var $overlayLine = $('.status-overlay');

    if (isLast) {

        $overlayLine.css('width', '0px');
        return;
    }

    if (currentWidth) {

        $overlayLine.css('width', currentWidth);
        $overlayLine.animate({ width: width }, 700);
    } else {

        $overlayLine.css('width', '0px');
        $overlayLine.animate({ width: width }, 700);

    }

};


function ShowNextElement() {

    var $elements = $('.element'),
        $overlayLine = $('.status-overlay'),
        $liElements = $('#elements li'),
        width;

    if (currentElement === elements[elements.length - 1]) {

        currentWidth = $overlayLine.width() + 'px',
        width = currentWidth + $($liElements[(elements.length - 1)]).outerWidth() + 'px';

        GoOverlay(width, true, currentWidth);


        currentElement = elements[0];

        $elements.hide();
        $(currentElement).fadeIn(1000);
        return;
    }


    i = elements.indexOf(currentElement) + 1;

    var currentTab = $liElements[(i - 1)],
        currentWidth = $overlayLine.width();

    if (currentWidth) {

        width = currentWidth + $(currentTab).outerWidth() + 'px';
        GoOverlay(width, false, currentWidth);

    } else {
        width = $(currentTab).outerWidth() + 'px';

        GoOverlay(width, false, false);
    }

    currentElement = elements[i];
    $elements.hide();
    $(currentElement).fadeIn(1000);

}

Thanks!

Upvotes: 0

Views: 142

Answers (2)

Pogrindis
Pogrindis

Reputation: 8121

There are a wealth of ways in which you could do this.

You should have some kind of controller to manage the show and hide. 

var Application = {
    show : function() {
        jQuery('.application-overlay').stop().animate({ top: 40 }, 500);
        jQuery('.cf-ribbon').stop().animate({height: 1000},500);
    },
    hide : function() {
        jQuery('.application-overlay').stop().animate({ top: -1200 }, 500);
        jQuery('.cf-ribbon').stop().animate({height: 200},500);
    }
};

Then you have your triggers : Application.show();

jQuery(document).ready(function() {

    jQuery('.cf-speakers .span2 a').hover(function() {
        jQuery('span',this).stop().animate({ opacity: 1.0 },100);
    }, function() {
        jQuery('span',this).stop().animate({ opacity: 0.0 },100);
    });;

    jQuery('.apply-now').click(function(e) {
        Application.show();

        e.stopPropagation();
        e.preventDefault();
    });

    jQuery('body').click(function(e) {
        var application = jQuery('.application-overlay');
        if( application.has(e.target).length === 0) 
            Application.hide();
    });

    jQuery('.gallery a').click(function(e) {

        var src = jQuery(this).attr('href');
        jQuery('.main-container img').hide().attr('src', src).fadeIn('fast');

        jQuery('.gallery a').each(function() {
            jQuery(this).removeClass('active');
        });

        jQuery(this).addClass('active');

        e.stopPropagation();
        e.preventDefault();
    });

});

Your css would of course come into play also but that can be left to you!

This should give you an example of what you need .. But you're already on the right track, sometimes there is merit in reusing other people code too you know! :)

Upvotes: 1

Nevin
Nevin

Reputation: 3306

http://jqueryui.com/progressbar/

You could try this..

There are more features in addition to this,check it out. Might come useful :)

Upvotes: 2

Related Questions