进度条摆动效果 [英] Progress Bar Wobble Effect

问题描述

摆动垂直进度条

---

我学会了如何构建一个整洁，动态大小

---

我的进步

我问这个问题因为我还不知道怎么做。
但是，我将从目前为止所学到的内容中尝试一下，并在此处发布我的
进度。

解决方案

所以这里是我的 JSFiddle 它。

评论应该是自我解释的。我不得不通过缓动为动画效果添加JQuery UI。我不确定你的意思 random ，但速度应该是你需要改变的全部。

< img src =https://i.stack.imgur.com/awzSc.pngalt =WobbleBar>对不起，截图中没有动画。

Wobbling Vertical Progress Bar

---

I learned how to build a neat, dynamically sized vertical progress bar with cross-bars in This Question.

Now, I want to make it fun!

---

The bar's wobble function should:

• take 4 parameters: element , height , speed , & random
• wobble the element height percentage with a customizable, randomized factor
• keep track of the elements's true height, which can change at any time!
• use an event (in the Fiddle, I supply an input and button) to set the true height to a new value, and animate to that height.

I'm looking for the simplest answer. Please explain how you did it, so that we JS newbies can learn tricks! Posting a Bounty of +50 to the best answer.

---

---

Bonus:

• change the bars's background color value based on the bar's true height. Red is 0%, Yellow is 50%, and Green is 100%;

If your function does this too, I'll add a +100 Bounty to your answer instead.

---

Template Fiddle

---

My Progress

I'm asking this question because I don't know how to do this yet. But, I'm going to try it from what I've learned so far, and keep my progress posted here.

解决方案

So here's my JSFiddle take on it.

Comments should be self explanatory. I had to add JQuery UI for the animation effects with easing. I'm not sure what you meant by random, but speed should be all you need to change.

Sorry, no animation in the screenshots.

这篇关于进度条摆动效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！