Jquery侧边栏在IE中不起作用答案

【问题标题】：Jquery sidebar not working in IEJquery侧边栏在IE中不起作用
【发布时间】：2012-09-11 07:33:36
【问题描述】：

谁能向我解释一下，为什么这在 IE 中不起作用？它完美地淡入其他浏览器中的每个图像，但是在 IE 中执行时，它只显示最后一个图像（图像 5）并保持这种状态。也许想出一个可能的解决方案？我对 jquery 很陌生 JS：

var rotationTime = 3000;
var fadeTimer = 500;
var zStart = 25;

var totalBanners;
var currentImage = 1;

$(document).ready(function(){
    totalBanners = $('#fade-slider > div').length;
    for(i=1;i<=totalBanners;i++){
        $('#img-' + i).css('z-index', '' + (zStart-i) + '');
    }
    $(document).everyTime(rotationTime,  'imagefader', function(){          
        if(currentImage < totalBanners){
            $('#img-' + currentImage).animate({opacity: 0}, fadeTimer);
            currentImage += 1;
        }
        else{
            currentImage = 1;
            $('#img-' + currentImage).animate({opacity: 1}, fadeTimer, 'linear', function(){
                for(i=1;i<=totalBanners;i++){
                    $('#img-' + i).animate({opacity: 1}, 0);
                }
            });         
        }       
    }, 0);
});

CSS：

@charset "UTF-8";
    #fade-slider {
      width:570px;
      height:207px;
      overflow:hidden;
      margin:0px;
      padding:0px;
      position:relative;
    }

    .position-zero {
        position:absolute;
        top:0px;
        left:0px;
    }

HTML：

<div id="fade-slider">
                        <div id="img-1" class="position-zero"><a href="#"><img src="images/slider/image-1.jpg" alt="Image1" /></a></div>
                        <div id="img-2" class="position-zero"><a href="#"><img src="images/slider/image-2.jpg" alt="Image2" /></a></div>  
                        <div id="img-3" class="position-zero"><a href="#"><img src="images/slider/image-3.jpg" alt="Image3" /></a></div>    
                        <div id="img-4" class="position-zero"><a href="#"><img src="images/slider/image-4.jpg" alt="Image4" /></a></div>     
                        <div id="img-5" class="position-zero"><a href="#"><img src="images/slider/image-5.jpg" alt="Image5" /></a></div>       
                    </div>

【问题讨论】：

您使用的是哪个版本的 Internet Explorer？
IE中的JS控制台告诉你什么？（双击IE底部状态栏）如果有错误，会弹出一个框。如果没有出现框，那么您可以（通常）排除 JS 问题。
你好布兰特。它没有显示任何错误.. 但我不明白这不可能是 JS 问题
您的 IE 是在兼容模式还是 Quirks 模式下运行？在 F12 工具中，确保它在 IE9 标准模式下运行
脚本运行良好，现在在 IE 中接受活动 x 对象后。非常感谢大家

标签： javascript jquery css internet-explorer

【解决方案1】：

尝试改变

$('#img-' + i).css('z-index', '' + (zStart-i) + '');

到

$('#img-' + i).css({'z-index':(zStart-i)});

或

$('#img-' + i).css('z-index', (zStart-i));

我不会声称它会起作用。但我认为这可能只是 IE 解释事物的方式，我认为它可能被解释为字符串而不是 INT 值，因此无法正确呈现它。但是再次没有说这就是问题所在，只是关于那条线的一些东西并没有在我的脑海中出现，并且没有测试它（目前在 Mac 上并且没有 IE）我不能确定。

【讨论】：

感谢您抽出宝贵时间克里斯。不过，这不是问题。该脚本运行良好，现在在 IE 中接受活动 x 对象后。非常感谢大家