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

尝试以下操作。它在 animate() 中的 CSS mods 之后使用一个对象来设置属性。

您可以使用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