Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Drop animation

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #207901
    Jtwa11
    Participant

    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.

    #207922
    Jtwa11
    Participant

    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.

    #207960
    Jtwa11
    Participant

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

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

    #207972
    justdan
    Participant

    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/

    #207984
    Jtwa11
    Participant

    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.

    #207986
    justdan
    Participant

    @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/

    #208015
    Jtwa11
    Participant

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

    #208017
    justdan
    Participant

    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.

    #208039
    Jtwa11
    Participant

    @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

    #208081
    justdan
    Participant

    @Shikkediel Beat me to it! Nice coding =D

    #208110
    Jtwa11
    Participant

    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

    #208112
    Jtwa11
    Participant

    @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.

    #208115
    Jtwa11
    Participant

    @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!

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.