Javascript 如何使用JQuery添加淡入淡出或图像过渡效果？

我每7秒就有一个

属性

我每7秒看到一次新图像，但如果在加载新图像时添加一些淡入淡出或过渡效果会更好

有没有简单的脚本

我不需要任何插件。只需要一些线索或几行样本就可以了。
单凭一张图片是做不到的

看看这个：

    <div id="main_over"></div> 
    <div id="main_img"></div> 
    <div id="himg" style="display:none; clear:both; margin-top:40px;"> 

            <img id="si_15" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_1__large.jpg" alt="dummy_image_large_1" /> 

            <img id="si_16" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_2__large.jpg" alt="dummy_image_large_2" /> 

            <img id="si_17" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_3__large.jpg" alt="dummy_image_large_3" /> 

            <img id="si_18" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_4__large.jpg" alt="dummy_image_large_4" /> 

    </div> 
<style> 
#main_over{position:absolute; z-index:10; width:800px; height:600px; background:#fff; display:block;}
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
    var i = 0;
    $('#himg img').each(function(){
        if(i == 0)
        {
            $('#main_over').html('<img src="' + $(this).attr('src') + '" alt="" />');

        }
        if(i == 1)
        {
            $('#main_img').html('<img src="' + $(this).attr('src') + '" alt="" />');
        }
        i ++;

        slide.arr.push($(this).attr('src')); 
    });

    setTimeout(function(){
        if(slide.arr.length < 2)
            slide.fade(0);
        else
            slide.fade(2);
    }, 3000);
});

var slide = {
    arr: Array(),
    fade: function(i)
    {
        $('#main_over').fadeOut("medium");
        setTimeout(function(){slide.next(i);}, 1000);
    },
    next: function(i)
    {
        $('#main_over').html($('#main_img').html());
        $('#main_over').css('display', 'block');

        $('#main_img').html('<img src="' + slide.arr[i] + '" alt="" />');

        i++;
        if(i >= slide.arr.length)
            i = 0;

        setTimeout(function(){slide.fade(i);}, 3000);
    }
}

</script> 


#主_在{位置：绝对；z索引：10；宽度：800px；高度：600px；背景：#fff；显示：block；}
$（文档）.ready（函数（）{
var i=0；
$（'himg img'）。每个（函数（）{
如果（i==0）
{
$（'#main_over'）.html（''）；
}
如果（i==1）
{
$（'#main_img'）.html（''）；
}
i++；
slide.arr.push（$（this.attr（'src'））；
});
setTimeout（函数（）{
如果（滑动角长度<2）
幻灯片。淡入淡出（0）；
其他的
幻灯片。淡出（2）；
}, 3000);
});
变量幻灯片={
arr:Array（），
淡入淡出：功能（一）
{
$（'main_over'）。淡出（“中等”）；
setTimeout（函数（）{slide.next（i）；}，1000）；
},
下一步：职能（一）
{
$（'main_over'）.html（$（'main_img'）.html（））；
$（'main_over'）.css（'display'，'block'）；
$（'#main_img'）.html（''）；
i++；
如果（i>=滑动角长度）
i=0；
setTimeout（函数（）{slide.fade（i）；}，3000）；
}
}
尽管KaiQing提到了这一点，但在更改图像时，您可以使用jQuery的回调功能淡入/淡出图像。可以这样做：

您需要使用两个图像：

<img id="backImg" />
<img id="frontImg" />

然后，在每7秒触发一次的代码中，淡出前面的图像。。。这将自动执行交叉淡入淡出效果，因为后面的图像已加载。淡入淡出完成后，将前图像的源设置为后图像的src，显示它，并将下一个图像预加载到后图像中：

这一切都假设您的图像大小相同。如果没有，您只需要对css进行更精细的处理，并将图像包装在淡入淡出的div中。
完全淡出淡入淡出的div中。我以为他要求的是过渡fx-crossfades或类似的东西。我所要求的是：当加载新图像时，我想用淡入效果隐藏旧图像，并用淡入效果加载新图像。这样用户就不会看到图像的突然变化。对不起，如果我不够清楚的话。有道理。只需确保您为该图像定义了容器的尺寸，否则淡出完成后，它将改变站点的布局。当我看到这篇文章的时候，我正好在做这件事，除了客户要求交叉淡入。为了它的价值，所有网站都应该包括宽度/高度属性。即使它们是可选的，但最好将它们包括在内，以便在等待内容时呈现页面时让浏览器休息一下（同样，如果内容丢失，也不会破坏设计）。尝试一下。这个代码看起来很小。如果行得通，我会接受的。我试过了。它不会褪色，但褪色时间有点长。我看到整个区域在短时间内变白（秒的分数）。然后加载新图像。看起来有点难看。我见过其他人在图像转换非常快的地方做得很好。好的，我将切换到动画，等等我很满意.fadeTo（'fast'，0.7，function（）{$（this）.attr（'src'，'..）.fadeTo（'slow'，1）；}）；我只有一张照片。如果没有任何事情像预期的那样起作用，我将把这当作我的最后手段。非常感谢您的回复。
<img id="backImg" />
<img id="frontImg" />

#backImg
{
    position: absolute;
}

function transitionImages(preloadImgUrl)
{
    $("#frontImg").fadeOut("slow", function()
    {
        $("#frontImg").attr("src", $("#backImg").attr("src")).show();
        $("#backImg").attr("src", preloadImgUrl);
    }
}