0

このスクリプトに jQuery の UI バウンス機能を追加するにはどうすればよいですか? スクリプトは現在、進行状況バーを設定された位置にスライドさせます。位置に達すると、数回前後に跳ね返ってから静止することを望みます。

以前のスタックオーバーフローの回答をいくつか試しましたが、どれも機能しません。

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

2 に答える 2

1

これはハックです。許容できるかどうかを確認してください。

bounceアニメーションを使用するshowには非表示のアイテムを呼び出す必要があるため、点滅効果が許容できるかどうかを確認してから使用できます。

animate コールバックを使用してみてください

$(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'
                    });
        });
     });
});

デモ:プランカー
デモ:効果

于 2013-03-29T03:27:06.563 に答える
1

以下を試してください。CSS mods の後にオブジェクトを使用し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

于 2013-03-29T03:29:19.353 に答える