褪色改变背景图像 [英] Fading in changing background images

问题描述

我有一个脚本可以根据我滚动的位置在背景图像之间切换。我可以让背景图像正确切换，但是我已经要求我有背景图像 fadeIn（）而不是简单地改变。基本上，我循环遍历背景图像，我想要前一个 fadeOut（），下一个到 fadeIn（）。是否有可能做到这一点？如果是这样，怎么样？这是脚本。

I have a script that switches between background images based on where I scroll. I am able to get the background images to switch correctly, but it's been requested that I have the background images fadeIn() instead of simply change. Basically, I'm looping through the background images and I want the previous one to fadeOut() and the next one to fadeIn(). Is it possible to do this? If so, how? Here's the script.

$("#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（），但它没有。

Here's where the background images change. I thought adding fadeIn() after the css operation would work, but it doesn't.

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

推荐答案

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

jQuery's fadeIn and fadeOut functions have a "complete" function, which is called after the animation has completed. You could try something like this.

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
} 

或者你可以做它是布尔方式。

Or you could do it the boolean way.

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（ ）。

For further insight, check out jQuery fadeIn() and jQuery fadeOut().

这篇关于褪色改变背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！