jQuery animations looking clunky and unnatural

JavaScript
#1

Hello everyone ! I’m new here, but currently working on the weather app :slight_smile:

So, I finished the Random Quote Machine yesterday, and thought I would add some interactions with a bunch of jQuery animations on the click of the button that fetches the next quote from the API.
My problem is, most of the time (especially on longer quotes), the jQuery animation feels very unnatural, I’m guessing because the initial height of my text-containing div is 0, and jumps right away to whatever height the text is.

It’s the kind of thing that drives me nuts, so I’d appareciate it a lot if anyone could give me some insight about this issue.

Here is the codepen.

Thanks in advance !

#2

That’s a nice design and I like the animation. :smile:

I think the issue you are having is not so much the size of the <div>s but because of the API call (jQuery.ajax()) you have between animations and that the jitteriness comes from that small delay before the data arrives.

If you move the animation sequence before the API call to the first few lines inside .done(), you will find that the animation becomes much smoother.

The only downside of doing that is that the button press now seems to be not responsive because of the delay mentioned above. I think you can get around this is by fetching (at least) two quotes, store them in an array, and fetch more as it falls below a certain threshold. I hope that helps! :smile:

1 Like
#3

@honmanyau

Thank you very much !
Storing these in an array looks like a nice idea, i’ll try that as soon as I can and I’ll let you know how it comes together.

#4

@honmanyau So I fixed it just now, and thanks to you I was able to find that the problem was resolved by playing with an .animate() on opacity instead of using .fadeIn() .fadeOut(). I also tested your idea to work on arrays instead of direct API returns, and now it works like a charm ! Thank you so much for this :slight_smile:

#5