IE11でflexsliderをfadeさせる【jquery】【bug fix】


flexslider 'fade' animation not work in IE11.

 

flexsliderにfadeを設定したら、IE11でfadeが効かなかったので修正。

(firefoxやchromeでは動作していた。)

 

どうもIE用のopacity調整してるらへんが怪しかったので、数時間かけて以下の方法で解決。

ちなみにflexsliderのバージョンはこちら。「jQuery FlexSlider v2.2.2」

(min.jsとjsファイルでは、記述がちょっと違っていたので注意!)

 

 

jquery.flexslider-min.jsの例

 

originalコード

~"init"===b&&(g?d.slides.css({opacity:0,display:"block",webkitTransition:"opacity "+d.vars.animationSpeed/1e3+"s ease",zIndex:1}).eq(d.currentSlide)~

 

fixedコード(修正後)

~"init"===b&&(g?d.slides.css({opacity:0,display:"block",webkitTransition:"opacity "+d.vars.animationSpeed/1e3+"s ease",transition:"opacity 2s",zIndex:1}).eq(d.currentSlide)~

 

 

修正箇所:

追加変更した部分はこれ。(only add)

,transition:"opacity 2s"

2sのところは、早さを設定しているので1sとかでもOK。お好みで調整すること。