Learning jQuery 2019, Part 1

I’m going to be updating this post with my thoughts about using jQuery and the things I learn about it as I go, here in 2019 when I consider it almost completely irrelevant. (I say almost because Bootstrap still uses it.)

Before today, I had a general idea that jQuery was at least still useful for fancy UI tricks like animation. I have almost never needed or wanted any sort of animation on my pages, and now CSS supports some transition effects that make jQuery even more unnecessary. But I wanted to at least understand how you use jQuery to accomplish this if you so choose. Maybe it’s more robust or something.

So, this wasn’t obvious at first, but the $().animate method does not work on background color. It says it only works on numeric values. Does that mean it works on font-size? Because that would be pretty impressive. Just tested it, and yes it actually can animate a change in font size. Let’s try some others. Animating left offset also works. To test that I wrote the following.

$("[data-test-p]").css({"position": "relative"});
$("[data-test-p]").css({"left": "0px"});
$("[data-test-p]").animate({"left": "200px"}, 3000);

The first two lines are just to establish the style properties before the animation. I think you can also set that in a stylesheet. Yes, that works.

Can you combine two animations in separate calls to the animate method?

$("[data-test-p]").animate({"font-size" : "30pt"}, 2000);
$("[data-test-p]").animate({"left": "200px"}, 3000);

This does not animate them simultaneously. It does them in sequence. You can combine them by putting both in a single line.

$("[data-test-p]").animate({"font-size" : "30pt", "left": "200px"}, 2000);

I can see some pretty cool uses for this kind of animation. But bear in mind that my main objection to using jQuery nowadays is that the code is imperative. The price you pay for low-level control is that you have to write explicit, imperative code specifying exactly what is supposed to happen. But I guess you could wrap this kind of instruction set into, for example, an angular directive.

So how do you animate a background color transition? The following doesn’t work for unknown reasons.

$("[data-test-p]").css({"background-color": "white"});
    $("[data-test-p]").css({"background-color" : "yellow", "transition" : "background-color 3000"}); //doesn't work

It seems you cannot use jQuery to implement CSS’s native transitions. There are, of course, gigantic extra jQuery plugins we can add on top of jQuery. But before resorting to that, let’s try one more thing. We can attach a class to an element with something like this.

.fade-in-bg {
    transition : background-color 2s;
    -webkit-transition: background-color 2s;
}

Then if you still want to cram in some jQuery, you can use jQuery to set the background-color style and then native CSS takes care of animating the transition. You can test that with the following.

$("[data-test-p]").css({"background-color" : "yellow"});
setTimeout(()=>{
    $("[data-test-p]").css({"background-color" : "cyan"});
}, 3000);

I guess here jQuery includes the benefit of being able to select all the elements matching a given selected and then change the styles of all of them, something that is slightly less easy to do without jQuery. Basically, you can download 87kB of code (minified) to save you from writing a loop yourself. Adding color transitions like this is something I might actually do for the sake of drawing attention to changes on the page, but so far I would definitely not make my users download jQuery just for that.

And yes, jQuery includes dozens of utilities in that 87kB. But…why? Why do I have to buy all of them to get some of them?