javascript - 在不断变化的背景图像中淡入淡出

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

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
} 

或者你可以用 bool 方式来做。

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