jQuery fadeIn fadeOut-IE8不淡入 [英] jQuery fadeIn fadeOut - IE8 does not fade
问题描述
谁能告诉我为什么.jpg在IE8中不会淡入或淡出.现在,它只是消失并重新出现而没有不透明度变化.我在本地和发布服务器上进行了设置,奇怪的是图像在本地的淡入淡出效果很好,只有当我去发布服务器时,它们才会消失.
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.
只是想知道我是否缺少某人可以快速帮助我的事情.
Just wondering if I am missing something someone could quickly help me with off the top of their heads.
这是发布服务器上的gcRotateContent,如果我只是将图像扔掉并进行淡入淡出,则它会起作用,由于某种原因,它不适用于此标记.
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.
<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>
推荐答案
我想出来了,css设置position:相对于图像,显然ie8不喜欢这样,有没有解决方法,我想知道,搜索开始了.
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.
这篇关于jQuery fadeIn fadeOut-IE8不淡入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!