jQuery Hover with Animate: Animations Not Stopping Correctly

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);
});

Additional Source

Posted in

The Mighty Mo! Design Co.

RSS From Toby’s Blog

  • Where uncertainty exists, don’t order specific.
    4 Idiot Case Studies with 2 simple age-old business lessons. The post Where uncertainty exists, don’t order specific. appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
  • “Now THAT was a good meeting!”
    A single effective meeting can change the course of history for a company. Imagine if you could lead effective meetings EVERY DAY! You can, but it takes curiosity & practice. This article is a good place to start your journey to a more effective you. The post “Now THAT was a good meeting!” appeared first […]
  • Never Respond to RFPs & Custom Proposal Requests
    Y'all who work at normal 9-5 jobs don't need to deal with the B.S. that is an RFP process (or rather you get paid to deal with it). But us freelancers gotta deal with a whole big bag of schtuff when it comes to custom proposals. Here's my quick-and-dirty RFP filtering process that I use […]

More posts from themightymo.com

How to change all permalink slugs on a custom post type to “post id” rather than “post title”

By The Mighty Mo! Design Co. | January 17, 2023

Today I needed to change the url slug of a custom post type from /cpt-slug/%post-title%/ to /cpt-slug/%post-id%/. There were thousands of solutions on the web explaining how to change the “cpt-slug” portion of the url, but I couldn’t find a simple solution to change the last part of the url. Well here it is! The…

clickup conversation hidden

My Main Issue with Clickup

By The Mighty Mo! Design Co. | November 7, 2022

Clickup integrates with everything. It’s simple to use. But there’s one thing that drives me crazy: Their user interface (UI) assumes the conversation we have around to-dos is NOT important. Clickup‘s UI assume the task writeup stuff (uploaded docs, description, links, etc.) is more important than the conversation about that stuff. In my experience, the…

How to merge two folders, including all sub-folders and files, on Mac

By The Mighty Mo! Design Co. | November 3, 2022

Today I had an issue where I needed to merge two folders, each of which contained many sub- and sub-sub folders that had lots of images. After a lot of trial-and-error and some Googling, I found the best solution is to use the “ditto” command in Terminal like this: That’s it! Hat tip to AppleInsider.

RSS From Toby’s Blog

  • Where uncertainty exists, don’t order specific.
    4 Idiot Case Studies with 2 simple age-old business lessons. The post Where uncertainty exists, don’t order specific. appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
  • “Now THAT was a good meeting!”
    A single effective meeting can change the course of history for a company. Imagine if you could lead effective meetings EVERY DAY! You can, but it takes curiosity & practice. This article is a good place to start your journey to a more effective you. The post “Now THAT was a good meeting!” appeared first […]
  • Never Respond to RFPs & Custom Proposal Requests
    Y'all who work at normal 9-5 jobs don't need to deal with the B.S. that is an RFP process (or rather you get paid to deal with it). But us freelancers gotta deal with a whole big bag of schtuff when it comes to custom proposals. Here's my quick-and-dirty RFP filtering process that I use […]