bxsliderのフェードイン・フェードアウトがおかしい(ちらつく)

bxslider.jsという、写真のスライドをホームページに簡単に作れるjQueryのプラグインがあります。

僕はプラグインってのは、将来的な互換性だったりとか、不具合があった時に直しづらいとか、カスタマイズ性に難がある(自分で作ってないから場合によっては解析に時間がかかる)ので、あまり好みませんが、それでもlightbox系だったりスライド系ではたまに使ってます。

結局、使うのと使わないのとどっちが生産性が高いかって話なんですよね。

で、bxslider.jsというスクリプト、そこそこメジャーなので、まぁ安心して使えるかな~と思っていますが、アニメーション設定をフェードにしたときに、フェードのアニメーションがチラチラすることがあります。
スムーズにフェードイン・フェードアウトせずに、アニメーションの次の写真が一回見えてしまったりとか。

これはまぁ、プラグインの不具合じゃないというか、jQueryの不具合なのかな~。
JavaScriptの不具合なのかな。
というか、仕様なのかな。。。

ともあれ困るのですが、原因は結構簡単で、cssでtransitionが設定されていると発生することがあります。
自分が書いたcssでなくても、cssフレームワークを導入していたりすると、cssでフェードやアニメーション的なことを実現するために、transitionが、広くいろいろなタグに対して設定されている場合があるのですよね。
例えば、「transition:all 0.2s ease-out;」とかね。
こうしておくと、マウスオーバーでボタンの色を変える場合とかに、0.2秒かけてフワッと変わってくれるのでカッコいいんですけど、jQueryのフェードと相性が悪く。。。

対策としては、bxslider.jsでフェードを使いたい場所については、transitionを外す(初期設定に戻すなど)の必要があります。

例えばbxslider.jsの公式サイトでは、「.bxslider」に対してスライドを設定しています。
css的には

.bxslider, bxslider * {
transition:initial;
}

等としておけば安心ではないでしょうか。
まぁ、このスライダーに限らないんですけどね。
jQueryでフェードする場合はここに注意です。

コメント