2012-02-10 7 views
1

フェードアニメーションがIE7 &で壊れています。フェードではなく次のスライドコンテンツがレンダリングされ、両方のスライドが存在し、指定されたanimaionDurationでマッシュされます。FlexSlider IE7&8でフェードアニメーションが壊れています

これに関する修正はありますか?

私はFlexSlider 'support'フィードに投稿しましたが、あまりよく監視されていませんので、私はSOに向いています。

$('.flexslider').flexslider({ 
    slideshow: true, 
    slideshowSpeed: 6000, 
    animation: "fade", 
    animationDuration: 500 
}); 

ここFlexSliderドキュメント:

http://flex.madebymufffin.com/

答えて

4

フレックススライダーが使用するIE7/8からanimationDurationを削除するif/elseステートメントを使用して問題を「修正」するのと同じ問題がありました。

IE8/7ではそれほど美しくはないが、問題が修正され、最新のブラウザが意図どおりに見えるようになります。

if ($().flexslider) { 
    if (window.navigator.userAgent.indexOf('MSIE 8.0;') > 0) { 
     $('.flexslider').flexslider({ 
      slideshowSpeed: 5000, 
      animation: "fade", 
      animationDuration: 0, 
      controlNav: false, 
      pauseOnHover: true, 
      directionNav: true 
     }); 
    } else{ 
     $('.flexslider').flexslider({ 
      slideshowSpeed: 5000, 
      animation: "fade", 
      controlNav: false, 
      pauseOnHover: true, 
      directionNav: true 
     }); 
    } 
}; 

希望します。

+0

完全に動作します。 'animationDuration'パラメータは' animationSpeed'になっています。 – nullPainter

0

複製することができません

ここに私の呼び出しです。

ただし、私はエラーコンソールでこれを取得しました。これにより他の何かがあなたのためにエラーを投げかけている場合、それはいくつかのjQueryイベントの伝搬を妨害している可能性があります。

http://web2carz.rawdesigns.net/common/js/awkward.js Failed to load resource: the server responded with a status of 404 (Not Found) 

このスクリプトの中に何か重要なものがある場合、私は問題を予見できます。

+0

このシートは、そのページのフルバージョンでは別のスライダー用です。 FlexSliderとの関係はありません。確認していただきありがとうございます! – robabby

+0

そうですが、IE 7と8のサンプルを実行しても問題はありませんでした。 –

+0

問題が私の雰囲気の中でレンダリングを開始するのに時間がかかり、私のチームの他の人たちも興味深い問題です。それはIE7と8のみで、最初の表示から数日かけてスライドをまとめるまでになります。おそらくFlexSliderのいくつかのバグは...一度公開すれば解決するかもしれません。今すぐ地元で開発されています...もう一度、時間をかけていただきありがとうございます! – robabby

0

私はIE7が "フェード"アニメーションをサポートしていないことに気付きました。どうしてか分かりません。 上記のすべての答えに基づいて、私は以下のようにスクリプト呼び出しを編集していました。 良いブラウザでは、「フェード」効果があり、IE7では「スライド」効果があります。

<script type="text/javascript"> 
$(window).load(function(){ 
    if (window.navigator.userAgent.indexOf('MSIE 7.0;') > 0) { 
     $('.flexslider').flexslider({ 
      animation: "slide" 
     }); 
    } else { 
     $('.flexslider').flexslider(); 
    } 
}); 
</script> 
関連する問題