19

谁能告诉我为什么 .jpg 在 IE8 中不会淡入或淡出。现在它只是消失和重新出现，没有不透明度变化。我在本地和发布服务器上设置了这个，奇怪的是图像在本地淡入淡出很好，只有当我去发布服务器时它们才停止淡出。

只是想知道我是否遗漏了一些东西，有人可以快速帮助我解决他们的问题。

这是发布服务器上的 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.”&lt;/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>
4

5 回答 5

58

显然有一个解决方法！

只需将绝对/相对定位元素设置为以下 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>

玩得开心，

奥马尔

于 2010-09-02T15:45:36.077 回答
6

我想通了，css设置位置：图像上的相对，显然ie8不喜欢那样，我想知道有没有解决方法，搜索开始了。

于 2010-05-04T16:28:22.010 回答
1

我刚遇到这个问题，所有的 CSS 滴答声都不起作用。fadeIn/Out 在 FF 和 Chrome 上有效，但在 IE8 中无效，该元素根本没有出现。在 IE7 中，它们只是从不可见变为可见。

所以为了解决我的问题，我只想在其他浏览器上保留淡入/淡出，并使元素出现在 IE8 中。解决方案是像这样使用回调：

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

这样我总是强迫我最终得到我想要的结果。

于 2012-07-13T15:32:42.937 回答
1

为了快速而肮脏的修复（或者如果上面的建议不起作用，就像我的情况一样），您可以简单地将 jQuery 的淡入/淡出替换为显示/隐藏。所以在html中做：

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

并在一些 IE hacks 的 javascript 文件（例如 ieFixes.js）中放入：

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

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

如果您要链接动画调用等，则必须对此进行一些调整。

于 2013-06-22T21:54:45.563 回答
0

将您的图像替换为带有背景图像的 div（相同大小）并淡入/淡出 div。

<div style="background-image:url('paper.gif');height:xxxpx;width:xxxpx"></div>
于 2010-05-04T15:45:47.453 回答