淡入改变的背景图像答案

【问题标题】：Fading in changing background images淡入改变的背景图像
【发布时间】：2015-04-16 17:49:53
【问题描述】：

我有一个脚本，可以根据我滚动的位置在背景图像之间切换。我能够正确切换背景图像，但要求我拥有背景图像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();
            }
        })
    })
})

【问题讨论】：

你不会看到带有小提琴的图像，所以你将无法看到发生了什么。
我原以为fadeIn() 会解决问题...图像加载时会出现延迟吗？以便在fadeIn 完成后加载并显示？
@Ted，我以为也有延迟，但不是只是不工作

标签： javascript jquery

【解决方案1】：

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

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()。

【讨论】：

对此我还有一个问题。该解决方案有效，但它在图像中不断淡化，即使在它进行切换之后也是如此。我该如何阻止它？
啊，好的。您可能需要暂停滚动功能。我认为因为这会在 slider_pos 介于两个值之间时触发，所以每次检测到它都会触发（这可能发生在每个像素移动上）。我会用更多代码更新我的答案。
除此之外，您还可以只使用布尔变量。我再次编辑了我的答案。
是的，这正是它正在做的事情。感谢您的回答和更新，我会试试看。

【解决方案2】：

启动一个fadeOut，然后加载新的img并调用fadeIn，它在fadeOut完成时触发（bg =你的元素）

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

【讨论】：