使用jQuery的fadeIn和fadeOut 两个方法做轮播效果,每当切换的时候都会闪一下白色(容器的背景色),后来我将容器的背景色变为黑色后,在firefox和chrome中不太容易看出来,但是在IE中却依然会闪烁(此时不是白色的)。该如何解决呢?是不是我js代码写的有问题呢?
(function(){
var currentIndex=1;
var time = 5000;
var currentLength = $(".banner_item li").length;
var setInter;
setInter1 = setInterval(move,time);
jQuery.easing.def = "easeOutQuad";
$(".banner_bottom_chose li").not($(".banner_bottom_chose li").last()).not($(".banner_bottom_chose li").first()).on("click",function(){
clearInterval(setInter1);
$(".banner_item li").stop(false,true).fadeOut("slow");// 将所有的状态回复 不然会有问题: 点击后面的再点击前面的图片不改变。
currentIndex = $(this).index() > currentLength ? 1 : $(this).index()-1;
move();
setInter1 = setInterval(move,time);
});
function move(){
$(".background_blue,.banner_bottom_title").stop(false,true).animate({left:currentIndex*115+20},300);
$(".banner_item li").eq(currentIndex-1<0 ? currentLength-1 :currentIndex-1).stop(false,true).fadeOut(1000);
$(".banner_text").eq(currentIndex-1<0 ? currentLength-1 :currentIndex-1).stop(false,true).animate({top:"340px"},800);
$(".banner_img").eq(currentIndex-1<0 ? currentLength-1 :currentIndex-1).stop(false,true).animate({right:"120px"},800);
setTimeout(function(){
$(".banner_item li").eq(currentIndex).stop(false,true).fadeIn(600);
$(".banner_text").eq(currentIndex).children("h2").css({paddingTop:"50px",paddingBottom:"50px"}).stop(false,true).animate({paddingTop:"0",paddingBottom:"0"},800);
$(".banner_text").eq(currentIndex).css({top:"0",opacity:"0"}).stop(false,true).animate({top:"170px",opacity:"1"},800);
$(".banner_img").eq(currentIndex).css({right:"-50px",opacity:"0"}).stop(false,true).animate({right:"10px",opacity:"1"},800);
currentIndex++;
if(currentIndex == currentLength){
currentIndex = 0;
}
},200)
}
})();