0

誰かが私に説明できますか、なぜこれがIEで機能しないのですか？他のブラウザの各画像に完全にフェードインしますが、IEで実行すると、最後の画像（画像5）のみが表示され、そのまま残ります。そして多分可能な解決策を思い付く？私はjqueryJSを初めて使用します。

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>
4

1 に答える 1

0

変更してみてください

$('#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を持っていない）、確信が持てません。

于 2012-09-10T23:33:36.140 に答える