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/

你可以试试这个..

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

Answer 2

有很多方法可以做到这一点。

你应该有某种控制器来管理节目和隐藏。

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

然后你有你的触发器：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();
    });

});

你的css当然会发挥作用，但这可以留给你！

这应该会给你一个你需要的例子。但是你已经走上了正确的轨道，有时候重复使用其他人的代码是有道理的！ :)

使用Jquery进行动画（条形填充）（建议）

2 个答案: