javascript - 使用 Jquery 进行动画(条形随着时间的推移而填满)(建议)

Question

我想复制与 ign.com 相同的功能，其中指示栏会随着时间的推移而填满。我得到了它的工作，但一段时间后我遇到了一些同步问题。因此，我愿意接受从头开始的建议(我是所有这些动画内容的初学者)。

这是代码。

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

}

谢谢!

Answer 1

http://jqueryui.com/progressbar/

你可以试试这个..

除此之外还有更多功能，请查看。可能会有用:)