jQuery UI反彈進度條

如何將jQuery的UI反彈功能添加到此腳本中？該腳本目前將進度條滑出到設定的位置。我希望當它達到這個位置時，它會來回跳動幾次然後休息。jQuery UI反彈進度條

我嘗試了一些以前的堆棧溢出的答案，但沒有一個工作。

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

來源

2013-03-29 Exhausted

嘗試以下。它使用animate()中的CSS模塊之後的對象來設置屬性。

您可以使用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-29 03:29:19 SomeShinyObject

即從屏幕上移除其中一個小節之後 – Exhausted

@Exhausted確定反彈效果正常！希望這就是你想要的。我可以理解你爲什麼耗盡 – SomeShinyObject

一直是社會和資源的消耗 - 像親一樣）; – Exhausted

這是一個黑客，檢查它是否可以接受。

因爲要使用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
演示：Effect

來源

2013-03-29 03:27:06

不:-(工作 – Exhausted

@Exhausted看到更新後的解決方案 –

它的彈跳..但不正是我希望我希望他們能夠反彈最終位置的他們的幻燈片後。（從右向左彈跳） - 請參閱鏈接 [鏈接]（http://music.insanitypop.com/bars.html） – Exhausted

jQuery UI反彈進度條

回答

相關問題