Fixing jQuery Animate Flickering

I just spent over a hour wrestling with this bug, and I'm hoping this post will help spare someone else the same pain.

The problem that I ran into was an annoying flicker when using the jQuery .animate() function to change the opacity of a DOM node.  I did a bunch of Googling, but none of the solutions worked for me. I tried:

• Calling e.preventDefault() in the event handler.
• Using return false; in the event handler (this was being done already).
• Calling .stop(true, true) on the node being animated.
• Calling .off() on the animated node to remove all event handlers

What ended up working for me was removing a CSS transition from the element being animated.  

The code in question (simplified):

listing.animate({opacity: 0}, function() {
    // some code
});

The listing element had the following CSS rules applied (simplified by removing vendor prefixes):

.listing-card {
        background: #fff;
        position: relative;
        border: 1px solid #ececec;
        border-radius: 3px;
        box-sizing: border-box;
        transition: all .1s;
        margin-bottom: 26px;
}

I deleted the transition and the flickering went away completely.

If none of these solutions work for you, I suggest doing the following to troubleshoot your specific issue:

• Make a button on the page that toggles your animation back and forth.
• Open up Chrome DevTools, and start deleting HTML, testing the animation with the button after each deletion until you have a minimal test case.
• Now start turning off CSS rules in DevTools until the animation works smoothly without flickering

Hopefully this helps someone else avoid a few hours of debugging!