June 22, 2019
Animating flexboxes when a mouse enters
Flexboxes were the first thing CSS created once it became sentient. Where CSS used to lay out boxes robotically following directions, now it can dynamically respond to changes to the size of a browser window, re-laying them out in relation to one another. This means you no longer have to engage in the standard design process of first trying to “float” elements to the left or right until you give up and just use a static table which you should have done in the first place anyway.
To get started with flexboxes, do what every non-professional Web muck-abouter does and pin this page to your browser.
But suppose you want those boxes to do something when a mouse comes into them? Since I keep on having to re-solve this problem because I can’t remember how or where I did it last time, I decided to post one way that works but is guaranteed not to be the way that actual Web developers do it. Also, it is not specific to flexboxes, so you may wonder flexboxes are in the title. Good point!
So, download jQuery and let us begin…
In this example (and on this actual page) we’re going to change the color of a border and increase its width when a mouse enters, and restore the color and width when the mouse leaves. You stick this code somewhere where it will be run before your user starts moving her mouse over your lovely flexboxes.
In this example, we have a set of flexboxes that have the class “flexbox”. Here goes:
// -- When mouse enters
$( ".flexbox" ).mouseenter(function(){
$(this).css({"borderColor" : "#AC3B61"})
$( this ).animate({
borderWidth: "10px"
}, 500, function() {
// do something after the animation finishes
});
});
// -- When mouse leaves
$( ".flexbox" ).mouseleave(function(){
$(this).css({"borderColor" : "white"})
$( this ).animate({
borderWidth: "1px"
}, 500, function() {
// do something after the animation finishes
});
});
As you may have observed, these two blocks are essentially the same: one thickens the element’s border when a mouse cursor enters, and the other restores it when the cursor exits.
If it’s not clear what’s going on here, the first line runs a new function whenever a mouse enters an element that has been given the class “flexbox”. Of course you can make up any class name you want.
Then there’s a line of jQuery magic that is going to affect which element the mouse entered (so long as that element has the “flexbox” class); the “this” designates the actual flexbox the mouse entered. That line changes the color of the border.
The next line, with the word “animate”, tells the page that what follows should be an animation — a transition over time — and that time is specified as half a second (500 milliseconds) . What’s it going to do? Change the border width.
Then there’s an empty function that executes after the animation. I left it there in case you need it.
The “mouseleave” functions undo those changes.
So, that’s it. I’m sure it’s suboptimal and probably wrong, but it’s working so far. And now maybe I’ll remember where I put the code.
Comments Off on Animating flexboxes when a mouse enters
