Jquery Cycle Fade 过渡在 IE 中不起作用

Question

我是 StackOverflow 的新手，所以希望大家多多包容。我是一名网页设计师，有一些 Jquery 经验，但我承认我不太擅长它。我主要使用插件，必要时可以对代码进行一些调整。

我目前正在开发一个使用液体布局的摄影网站。我在主页上加入了 Jquery 循环插件来帮助展示照片。我最初对这个插件有问题，因为它使用了大量的绝对定位。我最终能够在研究问题时找到的一些代码的帮助下解决这些问题（我丢失了找到代码的网站，所以如果有人认出它，我很乐意给予信任）。

现在我的页面工作正常，除了一个问题 - IE 不会生成淡入淡出过渡。它将显示第一张图像，清空整个屏幕，然后显示下一张图像。我花了几个小时研究这个问题，但还没有找到解决方案。我确实找到了一个论坛，其中有人建议为骑行元素添加固定的高度和宽度，但此修复对我不起作用。它确实使图像淡入，但它们消失并在淡入下一个图像之前再次创建空白屏幕。

淡入淡出效果在 Firefox 和 Chrome 中完美运行。我目前在网站上没有淡入淡出，但作为参考，以下是网址：http://www.jnicholasphoto。 com

这是 Javascript：

SetHeightToTallestChild('.slideshow');
$(function() {
  $('.slideshow').cycle({
        fx: 'scrollDown',               
        speed: 2000,
        timeout:5000,
        random: 1,
        cleartypeNoBg:true
    });
});  
$(window).resize(function() {
  SetHeightToTallestChild('.slideshow');
});



 });
function SetHeightToTallestChild(i) {
var tallest = 0;
$(i).children().each(function(){
  var h = $(this).height();
  if(h > tallest)
  tallest = h;
});
$(i).height(tallest);
}

HTML：

div class='photo floatr' id='photo'> 
    <div class='slideshow cycle-main-frame clearfix' > 
        <div class='cycle-main-frame-row'> <img src="images/collage1.png"  alt='J Nicholas Photography' /></div> 
        <div class='cycle-main-frame-row'> <img src="images/collage2.png"  alt='J Nicholas Photography' /></div> 
        <div class='cycle-main-frame-row'> <img src="images/three.png"  alt='J Nicholas Photography' /></div> 
        <div class='cycle-main-frame-row'> <img src="images/collage3.png"  alt='J Nicholas Photography' /></div> 
        <div class='cycle-main-frame-row'> <img src="images/collage4.png"  alt='J Nicholas Photography' /></div> 

    </div> 

CSS（与循环图像相关）：

.photo {
  padding: 15px 0px 15px 15px;
  margin: 0px;
  margin-top: 35px;
  width: 65%;
  }
.photo img {
  width: 100%;
  position: relative;
  display: block;
  border: 8px solid #2F2E29;
  border-right: none;
  }
.cycle-main-frame {
  width: auto !important;
  position: relative !important;
  overflow: visible !important;
}
.cycle-main-frame-row {
  width: auto !important;
  position: relative !important;
  height: 0 !important;
  }

Answer 1

将

$(function() {
  $('.slideshow').cycle({
        fx: 'scrollDown',               
        speed: 2000,
        timeout:5000,
        random: 1,
        cleartypeNoBg:true
    });
});

fx 部分更改为

        fx: 'fade',

Answer 2

IE 8 不支持透明 PNG 的淡入淡出。 IE 9 做得很好。

您将需要创建一个 if 语句并检测不透明度支持：

if(!jquery.support.opacity) {

    // run IE slideshow

} else {

    // run slideshow for browsers that support opacity

}