Jquery Cycle Fade轉換在IE中不起作用

我是StackOverflow的新手，所以我希望每個人都會忍耐。我是一名具有Jquery經驗的webdesigner，但我承認並不擅長。我主要使用插件，並可以在必要時對代碼進行一些修改。Jquery Cycle Fade轉換在IE中不起作用

我目前正在使用液體佈局的攝影網站。我已將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; 
    }

來源

2011-06-03 YellowBird

在

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

變化的FX部分

 fx: 'fade',

來源

2011-06-03 15:31:58 kei

我做到了這一點。它現在在「scrollDown」上，因爲它在IE中不會出現問題。 – YellowBird 2011-06-03 18:06:21

IE 8不支持的透明PNG的褪色。 IE 9很好。

你會想創建一個if聲明和檢測不透明支持：

if(!jquery.support.opacity) { 

    // run IE slideshow 

} else { 

    // run slideshow for browsers that support opacity 

}

來源

2011-10-28 21:12:51 iamwhitebox

Jquery Cycle Fade轉換在IE中不起作用

回答

相關問題