Javascript ajax图像上的CSS转换

因此，我尝试使用fadein/fadeout转换和ajax加载的图像构建css滑块。问题是，当ajax图像出现时，淡入淡出的css过渡效果应该可以正常工作，但事实并非如此。但是在第一次加载图像后，转换效果很好（因为我正在检查图像是否存在）

下面是一个例子

代码如下：

<style>
    body{ margin:0px; }
    #wrapper{
        position:relative;
        width:1024px;
        height:768px;
    }
    #wrapper img{
        position:absolute;
        width:;
        top:0px;
        left:0px;
        opacity: 0;
        -webkit-transition: all 0.5s;
         -moz-transition: all 0.5s;
           -o-transition: all 0.5s;
              transition: all 0.5s;
    }
</style>

<div id="wrapper">
    <img class="selected" src="img/photo01.jpg" />
</div>
<script>
    var images = [
            {image:'img/photo01.jpg', loaded:true},
            {image:'img/photo02.jpg', loaded:false},
            {image:'img/photo03.jpg', loaded:false},
            {image:'img/photo04.jpg', loaded:false},
            {image:'img/photo05.jpg', loaded:false}
        ],
        arrIndex = 0,
        zIndex = 1,
        timer = 1500,
        fadeInTime = 500,
        timerID,
        isLoading = false,
        container,
        imgPrefix = 'slideImage_',
        curSelected = $('#'+imgPrefix+arrIndex);

    $(document).ready(function(){
        container = $('#wrapper');
        timerID = setTimeout(nextImage,timer);
        $('img',container).attr('id',imgPrefix + arrIndex);
    });

    function nextImage(){
        if(!isLoading){
            arrIndex++;
            arrIndex = arrIndex >= images.length ? 0 : arrIndex;
            loadImage();
        }
    }

    function prevImage(){
        if(!isLoading){
            arrIndex--;
            arrIndex = arrIndex < 0 ? images.length-1 : arrIndex;
            loadImage();
        }
    }

    function loadImage(){
        var imgObj = images[arrIndex];

        isLoading = true;
        zIndex++;
        $('img:visible').css('opacity',0);

        if(imgObj.loaded){
            // $('#'+imgPrefix + arrIndex).hide().css('z-index',zIndex).fadeIn(fadeInTime);
            $('#'+imgPrefix + arrIndex).css({'opacity': 1})
            setTimer();
        } else {
            $('<img />')
            .load(function(){
                // $(this).hide();
                container.append(this);
                //$(this).fadeIn(fadeInTime);
                imgObj.loaded = true;
                setTimer();
            })
            .attr('id', imgPrefix + arrIndex)
            .attr('src',imgObj.image)
            .css({'opacity': 1});;
        }
    }

    function setTimer(){
        isLoading = false;
        timerID = setTimeout(nextImage,timer);
    }

</script>

正文{margin:0px；}
#包装纸{
位置：相对位置；
宽度：1024px；
高度：768px；
}
#包装机{
位置：绝对位置；
宽度：；
顶部：0px；
左：0px；
不透明度：0；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
-o型过渡：均为0.5s；
过渡：均为0.5s；
}
变量图像=[
{image:'img/photo01.jpg'，加载：true}，
{image:'img/photo02.jpg'，加载：false}，
{image:'img/photo03.jpg'，加载：false}，
{image:'img/photo04.jpg'，加载：false}，
{图像：'img/photo05.jpg'，加载：false}
],
指数=0，
zIndex=1，
定时器=1500，
fadeInTime=500，
蒂梅丽德，
isLoading=false，
集装箱，
imgPrefix='slideImage_u2;'，
CursSelected=$（“#”+imgPrefix+arrIndex）；
$（文档）.ready（函数（）{
容器=$（“#包装器”）；
timerID=setTimeout（下一个timeage，timer）；
$（'img'，container）.attr（'id'，imgPrefix+arrdex）；
});
函数nextImage（）{
如果（！isLoading）{
arrIndex++；
arrIndex=arrIndex>=images.length？0:arrIndex；
loadImage（）；
}
}
函数prevImage（）{
如果（！isLoading）{
ARR指数--；
arrIndex=arrIndex<0？图像。长度-1:arrIndex；
loadImage（）；
}
}
函数loadImage（）{
var imgObj=图像[arrIndex]；
isLoading=true；
zIndex++；
$（'img:visible'）.css（'opacity'，0）；
如果（imgObj.已加载）{
//$（'#'+imgPrefix+arrdex）.hide（）.css（'z-index'，zIndex）.fadeIn（fadeInTime）；
$（“#”+imgPrefix+arrdex）.css（{'opacity'：1}）
setTimer（）；
}否则{
$('

---

希望你能理解

说我疯了，但是你已经用AJAX和jquery带来了这些图像…为什么不让它成为

$（'#'+imgPrefix+arrdex）.css（{'opacity:1}，500）

和

$（'img:visible'）.css（{opacity:0}，500）

？我通常提倡CSS解决方案，但由于您已经在使用jQuery…我希望它在ipad或手机上看起来平滑，而jQuery做得有点慢。问题是您只是切换了img并重新加载它们……DOM将此视为同一张图片，并且转换已经应用到该图片上。我不这么认为这样想吧，因为我先检查它们是否存在，如果它们不存在，然后我用ajax添加它们。问题只在它们第一次加载时出现，然后按照预期的方式工作。如果你愿意，还有另一种选择。不久前，我在我的旧设计网站上写了一篇关于只使用CSS的幻灯片的博客，你只需要为IE9-编写jQuery。那样的话你可以在jqueryforinternetexploder中使用fadeIn/fadeOut，但对于mobile/W3C浏览器，你可以使用纯CSS