javascript - 进度条的 jQuery UI Bounce

Question

我如何将 jQuery 的 UI Bounce 功能添加到这个脚本中？该脚本当前将进度条滑出到设定位置。我希望当它到达该位置时，它会来回弹跳几次然后休息。

我尝试了一些以前的堆栈溢出答案，但没有一个有效。

    $(function () {
$(".meter .bar").each(function () {
    $(this)
        .data("origWidth", $(this).width())
        .width(0)
        .animate({
        width: $(this).data("origWidth")
    }, 900);
});
});

Answer 1

这是一个hack，检查它是否可以接受。

因为为了使用bounce动画我们需要调用show一个隐藏项，检查闪烁效果是否可以接受，然后就可以使用了。

尝试使用动画回调

$(function() {
    $(".meter .bar").each(function() {
        $(this).data("origWidth", $(this).width()).width(0)
            .animate({
                width : $(this).data("origWidth")
                }, 900, function(){
                    $(this).effect("bounce", {
            times:3,
            direction: 'right'
                    });
        });
     });
});

演示：Plunker
演示：效果

Answer 2

试试下面的。它使用 CSS 模块后的对象animate()来设置属性。

您可以使用bounce仅更改选项中的方向。

$(function () {
    $(".meter .bar").each(function () {

        $(this).data("origWidth", $(this).width())
            .width(0)
            .animate({
                width: $(this).data("origWidth")
            }, 700)
            .effect('bounce', {times: 3, 
                              direction: "right", 
                              distance: 10}
                    , 700);
    });
});

演示：jsFiddle