Question

如何使用jquery将一个图像淡化为另一个图像？据我所知，你会使用fadeOut，用attr（）更改源，然后再次使用fadeIn。但这似乎并不合适。我不想使用插件，因为我希望添加相当多的更改。

感谢。

Answer 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

Answer 2

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

完成淡入淡出后，您可以换回图像。粗略地说：

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

Answer 3

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

Answer 4

您确定使用传入callback的{{1}}来更改来源attr然后调用fadeOut吗？您无法按顺序致电fadeIn，fadeOut和attr()。您必须等待fadeIn完成...

Answer 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);
}

无论有多少＆＃34;幻灯片＆＃34;它都会有效。与.jumbo-image类在#jumbo-image-wrapper div。

Answer 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%;
    }
}

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

jQuery淡出新图像

6 个答案: