Drop animation

[Jtwa11]

I’m new to jQuery and would like some help!

http://codepen.io/Jtwa/pen/JYYoxR

Once the button is clicked, I want each list item to come down seperatly. With a 0.5 second delay between each drop.

[Jtwa11]

Here’s the “Button” I’m trying to copy. It’s not for a website, but rather just for practice.

http://codepen.io/MrBambule/pen/jIseg

I don’t want to copy the code because I don’t really understand the keyframe and jQuery part. So I’ve posted on here for advice because I think there is an easier way than what was done.

[Jtwa11]

I almost have it! How am I going to display 1 list item at a time?

http://codepen.io/Jtwa/pen/JYYoxR

[justdan]

I’m not sure if this is quite what you’re after, but I figured I’d try to help out as well. It doesn’t have that bounce effect for the list items, but that could be added pretty easily. Sorry for the horrific styling…

Here’s the fiddle:
https://jsfiddle.net/eqh8dd9q/

[Jtwa11]

Great answer. However, when the font is too big, you can see it before you click the button.

Is there a way to only have it display when the button is clicked.

[justdan]

@Jtwa11 We can definitely make that happen. How about this code… Much like before, only now all list items are hidden and will be display one at a time after you click the button.

Fiddle:
https://jsfiddle.net/eqh8dd9q/2/

[Jtwa11]

@justdan amazing! Thanks for the help. I learned a lot from you

[justdan]

Oh nice! That was a good call. I didn’t take multiple clicks into account like that. I’ll have to check out the .finish() more. Thanks for that.

[Jtwa11]

@Shikkediel @justdan I like how we’re slowly improving this menu.

There’s one more problem. You’re hiding the text behind the circle. So if the text is too big, it will show immediately once clicked. To resolve this, we may be able to make font-size:1px; and then slowly make it larger to our desired size. OR we hide each li item and let them appear 1 at a time

[justdan]

@Shikkediel Beat me to it! Nice coding =D

[Jtwa11]

Can you guys help fix up my a code a little? @Shikkediel @justdan
1)Lines 1-5 –> What would you guys do?
2)I still don’t have a drop animation. But I do like how they fade in with the fadeToggle()

http://codepen.io/Jtwa/pen/JYYoxR

[Jtwa11]

@Shikkediel the more I learn about jS the more they focus on “What if jQuery” Wasn’t available. I wouldn’t want a button that no one could click. Also, the button div is empty and the div’s inside are also empty. Essentially, it would be a waste of space if they had js disabled.

[Jtwa11]

@Shikkediel thank you for the answer.

If you look at my button, it tends to fade in and out in a weird way. Also, is there a way to stop the fade once the button is clicked twice? So the list items are starting to show, but if I click the button again. They should dissapear!

[Author]

Posts