jQuery 淡入淡出 - IE8 不淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2766735/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery fadeIn fadeOut - IE8 does not fade
提问by theDawckta
Can anyone tell me why a .jpg would not fade in or fade out in IE8. Right now it is just disapearing and reappearing with no opacity changes. I have this set up locally and on a publishing server, strange thing is the images fade in and out just fine locally, it's only when I go to the publishing server that they cease to fade.
谁能告诉我为什么 .jpg 在 IE8 中不会淡入或淡出。现在它只是消失和重新出现，没有不透明度变化。我在本地和发布服务器上设置了这个，奇怪的是图像在本地淡入淡出，只有当我去发布服务器时它们才会停止淡出。
Just wondering if I am missing something someone could quickly help me with off the top of their heads.
只是想知道我是否遗漏了一些可以快速帮助我解决问题的人。
Here is the gcRotateContent that is on the publishing server, If I just throw an image up and do a fade in out it works, for some reason it doesn't work with this markup.
这是发布服务器上的 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>
采纳答案by theDawckta
I figured it out, css setting position:relative on the image, aparently ie8 doesn't like that, is there a workaround I wonder, the search begins.
我想通了，css设置位置：相对于图像，显然ie8不喜欢那样，我想知道有没有解决方法，搜索开始。
回答by Omeriko
Apparently there's a workaround!
显然有一个解决方法！
Simply set the absolute/relative positioned elements the following css attributes:
只需将以下 css 属性设置为绝对/相对定位元素：
opacity:inherit;
filter:inherit;
E.g:
例如：
<div>
<img id='myImg' src='http://mydomain.com' style='position:absolute;top:10px;left:5px;filter:inherit;opacity:inherit' />
</div>
Have fun,
玩得开心，
Omer
欧玛
回答by Victor Martins
I just had this problem, and all the css ticks didn't worked. The fadeIn/Out worked on FF and Chrome, but not in IE8, the element didn't showed up at all. In IE7 they just went from invisible to visible.
我刚刚遇到了这个问题，所有的 css 滴答声都不起作用。淡入/淡出适用于 FF 和 Chrome，但不适用于 IE8，该元素根本没有出现。在 IE7 中，它们只是从不可见变为可见。
So to fix my problem I just wanted to keep the fadeIn/Out on the other browsers and make the elements appear in IE8. The solution was to use the callback like so:
所以为了解决我的问题，我只想在其他浏览器上保留淡入/淡出，并使元素出现在 IE8 中。解决方案是像这样使用回调：
$(".elements").fadeIn("slow",function(){$(this).show()}):
$(".elements").fadeOut("slow",function(){$(this).hide()}):
This way I always force the result I want in the end.
这样我总是强迫我最终得到我想要的结果。
回答by Jacob Mouka
For a quick and dirty fix (or if the suggestions above are just not working, as is my case) you can simply replace jQuery's fadeIn/fadeOut with show/hide. So in the html do:
对于快速而肮脏的修复（或者如果上面的建议不起作用，就像我的情况一样），您可以简单地将 jQuery 的淡入/淡出替换为显示/隐藏。所以在 html 中做：
<!--[if IE]>
<script type="text/javascript src="ieFixes.js"></script>
<![endif]-->
and in some javascript file of IE hacks (eg ieFixes.js) put:
并在 IE hacks（例如 ieFixes.js）的一些 javascript 文件中输入：
jQuery.fn.fadeIn = function() {
this.show();
}
jQuery.fn.fadeOut = function() {
this.hide();
}
You'll have to tweak this a bit if you're chaining animate calls, etc.
如果您要链接动画调用等，则必须稍微调整一下。
回答by Bastiaan Linders
Replace your image with a div (of the same size) with a background image and fade-in/-out the div.
用带有背景图像的 div（相同大小）替换您的图像，然后淡入/淡出 div。
<div style="background-image:url('paper.gif');height:xxxpx;width:xxxpx"></div>
