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反弹进度条

回答

相关问题