jQueryのfadeIn、fadeOutのアニメーションがちらつく

jQueryでfadeIn、fadeOutのアニメーションをしたときに、ちらつく現象について。

アニメーションはイージングの設定によって見た目が代わりますが、一番基本のlinearでもちらつきます。
「ちらつく」というのがどういう現象かというと、本来は透明から不透明に少しずつ現れていってほしいのですが、透明状態から一瞬濃い状態になり、また薄い半透明になり、それからアニメーションがスタートする感じ。

言ってみれば、フェードインがスタートする前に、ちょっと見えちゃうんですよね、一瞬。
この一瞬見えちゃうってのがすごくカッコ悪い。
っていうか、もうチカチカして、一目見て不具合！って感じ。

で、原因はというと、CSSのtransition設定とぶつかっていたのでした。
transition設定をしている要素に対してfadeIn、fadeOutをすると発生する現象のようです。

いやー、ちょっとハマったわ。

なので、transitionをやめるか、どうしても必要なら、fadeIn・fadeOutのアニメーションが終わった後にjQueryでセットするということになるでしょう。