Back in my Flash days, animations seemed to just work. I am finding that jQuery hover and animate events are not as forgiving.
I have a web page with a grid of images. Each image has a jQuery hover event. The issue I was having with this is that when I would quickly hover from image-to-image or swipe the cursor across the screen, the hover effects, collectively, would look weird and sometimes would not fire properly at all.
The solution (thanks to Tom for providing it!), was to add the stop(true,true) event to each animation as follows:
// jQuery
$('.myclass').hover(function(){
$(this).stop(true, true).animate({opacity: 0}, 150);
}, function(){
$(this).stop(true, true).animate({opacity: .8}, 150);
});
More posts from themightymo.com
How to auto-save Advanced Custom Fields (ACF) data to a file in your theme
With ACF 5, they shipped a relatively-unknown and awesome feature: The ability to have WordPress automatically-save your ACF fields to a json file in your theme folder every time you save your fields. This has the effect of: All you need to do is add a folder called, “acf-json”, to your theme folder, and it…
How to use $current_user or is_user_logged_in() with FacetWP and WordPress to show different content for logged-in users
I have a membership site where I need to display certain FacetWP results to people who are logged in and other FacetWP results to people who are logged out. Unfortunately, FacetWP forgets WordPress’ global $current_user variable the minute you use one of the facets. Same with WordPress’ is_user_logged_in() function – FacetWP forgets it all once…
How to shrink the size of wp_options table in WordPress
I was recently horrified to discover that the “wp_options” table of this site was over 1.3 gigabytes in size. For those of you counting at home – that is ENORMOUS and unnecessary. I was confused, because the table seemed to balloon overnight (and likely did balloon overnight, it turns out!). The issue was caused by…