web-dev-qa-db-ja.com

jQuery fadeInfadeOut-IE8はフェードしません

IE8で.jpgがフェードインまたはフェードアウトしない理由を誰かに教えてもらえますか？現在、不透明度を変更せずに消えて再表示されています。私はこれをローカルとパブリッシングサーバーに設定していますが、奇妙なことに、画像はローカルでうまくフェードインおよびフェードアウトします。パブリッシングサーバーにアクセスしたときにのみ、フェードが停止します。

誰かが頭のてっぺんからすぐに私を助けてくれる何かが足りないのではないかと思っています。

これが公開サーバー上にあるgcRotateContentです。画像をスローしてフェードインすると、何らかの理由でこのマークアップでは機能しません。

<div class="gcRotateContent">
   <div id="USCFRR2EN" class="gcEmployeeProfile">
      <div class="gcEmployeeProfileHeading">
         Meet John</div>
      <div class="gcEmployeeProfileContent">
         <div class="gcEmployeeProfileHRPad">
         </div>
         <div class="gcEmployeeProfileHR">
         </div>
         <div class="gcEmployeeProfileHRPad">
         </div>
         <div class="gcEmployeeProfileSLVideo">
            <img src="/PublishingImages/Profile_JOHN-190x96.jpg" alt="Portrait of employee John."
               height="96" width="190"></div>
         <div class="gcEmployeeProfileName">
         </div>
         <div class="gcEmployeeProfileTitle">
            Software Development Lead, Server Performance</div>
         <div class="gcEmployeeProfileQuote">
            “You will find no other company with the sheer breadth of technologies. The things you get to see and learn from other
            people are amazing.”</div>
      </div>
      <div class="gcEmployeeProfileFooter">
      </div>
   </div>
</div>

<div class="gcRotate">
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px;">
            This is first content
            <img src="http://pix.motivatedphotos.com/2008/6/16/633492359109161542-Skills.jpg"
               alt="First" />
         </div>
      </div>
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px">
            This is second content
            <img src="http://www.funnycorner.net/funny-pictures/5010/cheezburger-locats.jpg"
               alt="Second" />
         </div>
      </div>
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px">
            This is third content
            <img src="http://icanhascheezburger.files.wordpress.com/2007/06/business.jpg" alt="Third" />
         </div>
      </div>
   </div>



   <div>
      This shouldn't move.
   </div>

   <script type="text/javascript">
      function fadeContent() {

         $(".gcRotateContent").first().customFadeOut(500, function() {
            $(".gcRotateContent:hidden:first").customFadeIn(500)
         });
         $(".gcRotateContent").first().appendTo($(".gcRotateContent").parent());
      }

      $(".gcRotate").height(0);

      $(".gcRotateContent").each(
         function() {
            if ($(".gcRotate").height() < $(this).height()) {
               $(".gcRotate").height($(this).height());
            }
         }
         );

      $(".gcRotateContent").each(function() {
         $(this).css("display", "none")
      });

      $(".gcRotate").hover(function() { window.clearInterval(timer) }, function() { timer = window.setInterval("fadeContent()", 2000) });

      $(".gcRotateContent").first().show(0);
      var timer = window.setInterval("fadeContent()", 2000);

      (function($) {
         $.fn.customFadeIn = function(speed, callback) {
            $(this).fadeIn(speed, function() {
               if (jQuery.browser.msie)
                  $(this).get(0).style.removeAttribute('filter');
               if (callback != undefined)
                  callback();
            });
         };
         $.fn.customFadeOut = function(speed, callback) {
            $(this).fadeOut(speed, function() {
               if (jQuery.browser.msie)
                  $(this).get(0).style.removeAttribute('filter');
               if (callback != undefined)
                  callback();
            });
         };
      })(jQuery);
   </script>
jqueryfadeinfadeout
19
theDawckta

私はそれを理解しました、css設定位置：画像上で相対的です、どうやらie8はそれを好きではありません、私が思う回避策はありますか、検索が始まります。

6
theDawckta

どうやら回避策があります！

次のcss属性の絶対/相対配置要素を設定するだけです。

opacity:inherit;
filter:inherit;

例えば：

<div>
<img id='myImg' src='http://mydomain.com' style='position:absolute;top:10px;left:5px;filter:inherit;opacity:inherit' />
</div>

楽しんで、

オメル

59
Omeriko

迅速で汚い修正のために（または私の場合のように上記の提案がうまくいかない場合）、jQueryのfadeIn/fadeOutをshow/hideに置き換えるだけです。したがって、htmlでは次のようにします。

<!--[if IE]>
<script type="text/javascript src="ieFixes.js"></script>
<![endif]-->

そしてIEハック（例えばieFixes.js）のいくつかのjavascriptファイルに入れてください：

jQuery.fn.fadeIn = function() {
    this.show();
}

jQuery.fn.fadeOut = function() {
    this.hide();
}

アニメーション呼び出しなどをチェーンする場合は、これを少し調整する必要があります。

1
Jacob Mouka

私はちょうどこの問題を抱えていました、そしてすべてのcssティックは機能しませんでした。フェードイン/アウトはFFとChromeで機能しましたが、IE8では機能せず、要素はまったく表示されませんでした。 IE7では、それらは非表示から表示に変わりました。

そのため、問題を解決するために、他のブラウザーでフェードイン/アウトを維持し、要素をIE8に表示させたいと思いました。解決策は、次のようにコールバックを使用することでした。

$(".elements").fadeIn("slow",function(){$(this).show()}):
$(".elements").fadeOut("slow",function(){$(this).hide()}):

このようにして、私は常に最終的に望む結果を強制します。

1
Victor Martins

画像を背景画像のあるdiv（同じサイズ）に置き換え、divをフェードイン/フェードアウトします。

<div style="background-image:url('paper.gif');height:xxxpx;width:xxxpx"></div>
0
Bastiaan Linders