Question

我正在寻找以正确方式执行以下操作：

$("#some-image").fadeOut();
$("#some-image").attr("src", "new-src.png");
$("#some-image").fadeIn();

出于计时目的，以下内容将其设置得更近，但我知道这仍然是错误的：

$("#some-image").fadeOut(function(){
  $(this).attr("src", "new-src.png").fadeIn();
});

按顺序执行以下操作的正确方法是什么：

淡出图像
图片淡出后，加载新的src
新图像完全加载后，将图像淡入淡出

干杯！

Answer 1

使用回调函数。一旦fadeOut完成，我们在更改src后更改src并淡化imagein。

$("#some-image").fadeOut(function(){
  //after the fadeout completes, change the src of the image.
  $(this).attr("src", "new-src.png").fadeIn();      
});

Answer 2

您的问题可能是新图像在包含它的DOM元素已经淡入之后才会加载。确保图像在调用fadeIn（）之前已完全加载：

$("#some-image").fadeOut(function(){
    var tgt = $(this),
        img = new Image,
        src = "new-src.png";
    img.onload = function() {
        tgt.attr('src', src).fadeIn();
    };
    img.src = src;
});

更好的是，提前加载图像：

<script>
    // Outside of $(function() {})
    function preload_img(src) {
        var img = new Image;
        img.src = src; // loads immediately, maybe even before DOMReady
    }
</script>

然后，当用户触发淡入/淡出时，您不必担心图像是否已加载。

jQuery隐藏图像，更改内容，显示图像

2 个答案: