淡入淡出背景图片的变化

Question

我有一个脚本，根据我滚动的位置切换背景图像。我能够正确切换背景图像，但是有人要求我使背景图像使用 fadeIn() 而不是简单更改。基本上，我正在循环遍历背景图像，我希望以前的背景图像 fadeOut() ，下一个背景图像 fadeIn()。是否可能做到这一点？如果可以，怎么做？以下是这个脚本。

$("#scroll").on("slidestart", function(ev, ui){
    $(this).on("mousemove touchmove", function(){
        var slider_pos = $("span").offset().top;

        $("#menu").find(".schematics").each(function(ev){
            var schematic_id = $(this).data("id").split("_")[0];
            var schematic_top = $(this).offset().top;
            var schematic_height = $(this).height();
            var schematic_bottom = (schematic_top + schematic_height);

            var url = $(this).data("url");

这里是背景图片更改的地方。我认为在 CSS 操作之后添加 fadeIn() 应该可以工作，但事实并非如此。

            if((slider_pos >= schematic_top) && (slider_pos <= schematic_bottom)){
                $("#plane_image").css("background-image", "url(" +url +")").fadeIn("slow");

                $(".vis").hide();
                $(".title").hide();
                $("#" +schematic_id +"_list").show();
                $("#" +schematic_id +"_head").show();
            }
        })
    })
})

- User

---

你无法通过fiddle看到图片，因此你将无法了解正在发生的事情。 - User

我本以为 fadeIn() 可以解决问题...但是图片加载时会有延迟吗？这样它会在 fadeIn 完成后加载和显示吗？ - Ted

@Ted，我也以为有延迟，但实际上没有，只是它不起作用。 - User

Answer 1

jQuery的fadeIn和fadeOut函数有一个“complete”函数，在动画完成后调用。您可以尝试像这样做。

var slideTimeout;   // global var for any slider timeout
if((slider_pos >= schematic_top) && (slider_pos <= schematic_bottom)){
    if(slideTimeout) {
        clearTimeout(slideTimeout);  // clears the timeout if we detect a new slide movement.
    }
    slideTimeout = setTimeout(function(){
        $("#plane_image").fadeOut("slow", function(){
            $("#plane_image").css("background-image", "url(" +url +")").fadeIn("slow", function(){
                $(".vis").hide();
                $(".title").hide();
                $("#" +schematic_id +"_list").show();
                $("#" +schematic_id +"_head").show();
            });
        }); 
    }, 1000);   // it will wait 1 second before firing the method again
} 

或者你可以使用布尔方式来完成。

var inVisibleRegion = false;
if((slider_pos >= schematic_top) && (slider_pos <= schematic_bottom)){
    if(!inVisibleRegion) {
        $("#plane_image").fadeOut("slow", function(){
            $("#plane_image").css("background-image", "url(" +url +")").fadeIn("slow", function(){
                $(".vis").hide();
                $(".title").hide();
                $("#" +schematic_id +"_list").show();
                $("#" +schematic_id +"_head").show();
            });
        }); 
        inVisibleRegion = true;
    }
}
else {
    inVisibleRegion = false;
}

如需更深入了解，请查看jQuery fadeIn()和jQuery fadeOut()。

- BobbyDazzler

---

我有一个进一步的问题。这个解决方案是有效的，但它在图像切换后仍然不断地淡入。我该如何停止它？ - User

啊，好的。你可能需要在滚动功能中设置一个时间间隔。我认为因为这会在slider_pos处于两个值之间时触发，它会在每次检测到这种情况时触发（这可能是在每个像素移动时都发生）。我会更新我的答案，并附加一些代码。 - BobbyDazzler

除此之外，您也可以使用布尔变量。我已经再次编辑了我的答案。 - BobbyDazzler

是的，那正是它正在做的。谢谢你的答案和更新，我会试一下的。 - User

Answer 2

开始一个fadeOut，然后加载新的img并调用fadeIn，在fadeOut完成时触发（bg = 您的元素）

bg.fadeOut('slow', function () {
   bg.load(function () {bg.fadeIn();});
   bg.attr("src", newbgdrc);
});

- Mark S