- This topic is empty.
September 9, 2015 at 8:04 pm #207901
I’m new to jQuery and would like some help!
Once the button is clicked, I want each list item to come down seperatly. With a 0.5 second delay between each drop.September 10, 2015 at 4:49 am #207922
Here’s the “Button” I’m trying to copy. It’s not for a website, but rather just for practice.
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.September 10, 2015 at 8:32 am #207960
I almost have it! How am I going to display 1 list item at a time?September 10, 2015 at 9:36 am #207972
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/September 10, 2015 at 1:24 pm #207984
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.September 10, 2015 at 1:53 pm #207986September 10, 2015 at 8:07 pm #208015September 10, 2015 at 9:11 pm #208017
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.September 11, 2015 at 4:24 am #208039
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 timeSeptember 11, 2015 at 3:51 pm #208081September 12, 2015 at 6:45 pm #208110September 12, 2015 at 7:31 pm #208112
@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.September 12, 2015 at 8:29 pm #208115