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

Posted 2023-05-08

【中文标题】如何使用 JQuery 添加淡入淡出或图像过渡效果？

【英文标题】：How to add fading or image transition effect using JQuery?

【发布时间】：2011-06-18 22:40:32

【问题描述】：

我的页面上只有一个 <img> 元素。我每 7 秒更改一次此图像的 src 属性。

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

有些人有简单的脚本吗？

我不需要任何插件。只需要一些线索或几行样本即可。

【参考方案1】：

尽管 KaiQing 提到过，但您可以在更改图像时使用 jQuery 的回调功能来淡入/淡出图像。可以这样做：http://www.jsfiddle.net/bradchristie/HsKpq/1/

$('img').fadeOut('slow',function()
    $(this).attr('src','/path/to/new_image.png').fadeIn('slow');
);

【讨论】：

尝试一下。这段代码看起来很小。如果可行，我会接受。

我试过了。它会褪色，但褪色时间有点长。我看到整个区域在短时间内变白（几分之一秒）。然后它加载新图像。看起来有点丑。我看到其他人在图像转换发生得非常快的地方做得很好。

好的，我会切换到动画，稍等。 ;-)

我很满意 .fadeTo('fast', 0.7, function () $(this).attr('src', '..').fadeTo('slow', 1) ; );

【参考方案2】：

您需要使用两张图片：

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

将#backImg 设置在#frontImg 后面，如下所示：

#backImg

    position: absolute;

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

function transitionImages(preloadImgUrl)

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

这一切都假设您的图像大小相同。如果没有，您将希望对 css 进行更精细的处理，并将图像包装在淡出的 div 中。

【讨论】：

我只有一张图片。如果没有按预期工作，我会将其视为最后的手段。非常感谢您的回复。

【参考方案3】：

你不能只用一张图片来做到这一点。

看看这个：

    <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"  /> 

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

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

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

    </div> 
<style> 
#main_overposition: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') + '"  />');

        
        if(i == 1)
        
            $('#main_img').html('<img src="' + $(this).attr('src') + '"  />');
        
        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] + '"  />');

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

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


</script> 

【讨论】：

完全淡入淡出。我以为他在要求过渡效果 - 交叉淡入淡出或类似的东西。

我所要求的只是：当加载新图像时，我想隐藏带有渐变效果的旧图像并加载带有渐变效果的新图像。这样用户就不会看到图像的突然变化。对不起，如果我不够清楚。

有道理。只需确保为该图像定义容器的尺寸，否则当淡出完成时它将改变站点的布局。当我看到这篇文章时，我恰好正在做这件事，除了客户要求交叉淡入淡出。

不管怎样，所有网站都应该包含宽度/高度属性。即使它们是可选的，在等待内容的同时呈现页面时，最好将它们包含在浏览器中，以便让您的浏览器休息一下（同样，如果内容丢失，它不会破坏设计）。