jQuery淡入新图像答案

【问题标题】：jQuery fade to new imagejQuery淡入新图像
【发布时间】：2010-12-30 22:59:09
【问题描述】：

如何使用 jquery 将一张图像淡入另一张图像？据我所知，您将使用淡出，使用 attr() 更改源，然后再次淡入。但这似乎并没有按顺序工作。我不想使用插件，因为我希望添加很多更改。

谢谢。

【问题讨论】：

【解决方案1】：

在最简单的情况下，您需要在调用fadeOut()时使用回调。

假设页面上已经有图片标签：

<img id="image" src="http://sstatic.net/so/img/logo.png" />

您将一个函数作为回调参数传递给fadeOut()，它会重置src 属性，然后使用fadeIn() 淡出：

$("#image").fadeOut(function() { 
  $(this).load(function() { $(this).fadeIn(); }); 
  $(this).attr("src", "http://sstatic.net/su/img/logo.png"); 
});

对于 jQuery 中的动画，回调在动画完成后执行。这使您能够按顺序链接动画。请注意对load() 的调用。这可以确保图像在淡入之前加载（感谢 Y. Shoham）。

Here's a working example

【讨论】：

问题是新图像尚未加载，因此新图像会闪烁。（当然，只有在缓存为空时才能看到）
我确实说过“最简单的情况”。另一种方法是使用 javascript 或另一个隐藏的 img 标记预加载第二张图像。淡出原来的，然后淡入新的。
或者，您可以使用load事件，来确定加载。
这实际上会导致图像淡入白色然后再次淡入。用户可能希望直接从一张图像淡入到另一张图像。
如果用户想要它没有白色中间，那么它必须通过后台加载来完成，正如 Ryan 所说；尽管等待load 是一种很好的做法。

【解决方案2】：

$("#main_image").fadeOut("slow",function(){
    $("#main_image").load(function () { //avoiding blinking, wait until loaded
        $("#main_image").fadeIn();
    });
    $("#main_image").attr("src","...");
});

【讨论】：

【解决方案3】：

好吧，您可以将下一张图片放在当前图片的后面，然后淡出当前图片，使其看起来好像正在淡入下一张图片。

褪色完成后，您将图像换回。这么粗略：

<style type="text/css">

.swappers{
    position:absolute;
    width:500px;
    height:500px;
}

#currentimg{
    z-index:999;
}

</style>

<div>
    <img src="" alt="" id="currentimg" class="swappers">
    <img src="" alt="" id="nextimg" class="swappers">
</div>

<script type="text/javascript">
    function swap(newimg){
        $('#nextimg').attr('src',newimg);
        $('#currentimg').fadeOut(
            'normal',
            function(){
                $(this).attr('src', $('#nextimg').attr('src')).fadeIn();
            }
        );
    }
</script>

【讨论】：

【解决方案4】：

您确定要使用传递给fadeOut 的callback 来更改源属性，然后调用fadeIn？您不能按顺序调用fadeOut、attr() 和fadeIn。您必须等待fadeOut 完成...

【讨论】：

【解决方案5】：

老问题，但我想我会回答。我将它用于主页上的大标题图像。通过为当前图像和下一个图像操作 z-index 来很好地工作，在当前图像的正下方显示下一个图像，然后淡出当前图像。

CSS：

#jumbo-image-wrapper
{
    width: 100%;
    height: 650px;
    position: relative;
}

.jumbo-image
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

HTML：

<div id="jumbo-image-wrapper">
    <div class="jumbo-image" style="background-image: url('img/your-image.jpg');">
    </div>
    <div class="jumbo-image" style="background-image: url('img/your-image-2'); display: none;">
    </div>
</div>

Javascript (jQuery)：

function jumboScroll()
{
    var num_images = $("#jumbo-image-wrapper").children(".jumbo-image").length;

    var next_index = jumbo_index+1;
    if (next_index == num_images)
    {
        next_index = 0;
    }

    $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).css("z-index", "10");
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).css("z-index", "9");
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).show();
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).fadeOut("slow");

    jumbo_index = next_index;

    setTimeout(function(){
        jumboScroll();
    }, 7000);
}

无论#jumbo-image-wrapper div 中有多少带有 .jumbo-image 类的“幻灯片”，它都会起作用。

【讨论】：

【解决方案6】：

对于那些希望图像根据宽度百分比（根据您的浏览器宽度进行缩放）缩放的人，显然您不想在 CSS 中的 PIXEL 中设置高度和宽度。

这不是最好的方法，但我不想使用任何 JS 插件。

那么你能做的是：

创建一个相同大小的透明PNG并为其添加一个ID 第二条横幅
将您的原始图片命名为first-banner
将它们都放在一个 DIV 下

这是供您参考的 CSS 结构：

.design-banner {
    position: relative;
    width: 100%;
    #first-banner {
       position: absolute;
       width: 100%;
    }
    #second-banner {
       position: relative;
       width: 100%;
    }
}

然后，您可以安全地淡出原始横幅，而不会显示图像移动和上下闪烁后放置的内容

【讨论】：