Question

我制作了这个非常基本的脚本，只是在鼠标悬停时更改背景图像。好吧，图像会像maby一样闪烁白色.1秒然后执行转换。我似乎无法解决这个问题吗？这是基本代码：

$(document).ready(function(){
    $('#wrapper').mouseenter(function() {
       $("body").css({"background":"url(images/main_background_over.jpg) no-repeat center fixed",
                    "-webkit-transition":"all 1.0s ease-in-out",
                    "-moz-transition":"all 1.0s ease-in-out",
                    "-o-transition":"all 1.0s ease-in-out",
                    "-ms-transition":"all 1.0s ease-in-out",
                    "transition":"all 1.0s ease-in-out",
                    "background-size":"cover"
            });
    });     

    $('#wrapper').mouseleave(function() {
       $("body").css({"background":"url(images/main_background.jpg) no-repeat center fixed",
                    "background-size":"cover"
            });
    }); 
});

我也遇到了firefox和safari转换的问题，如果有人也可以帮我解决这个问题。

Answer 1

如果将transition添加到css文件会怎样？也就是说，不是通过jQuery添加转换，而是将它们直接添加到body css声明中。

body {
    -webkit-transition: all 1.0s ease-in-out;
    -moz-transition: all 1.0s ease-in-out;
    -o-transition: all 1.0s ease-in-out;
    -ms-transition: all 1.0s ease-in-out;
    transition: all 1.0s ease-in-out;
    background-size: cover;
    background: url(images/main_background.jpg) no-repeat center fixed;
}

然后，在您的jQuery中，只需更改body的背景属性即可。

$(function(){
    $('#wrapper').mouseenter(function() {
       $("body").css("background":"url(images/main_background_over.jpg) no-repeat center fixed");
    });     

    $('#wrapper').mouseleave(function() {
       $("body").css("background":"url(images/main_background.jpg) no-repeat center fixed");
    }); 
});

在过渡时闪烁白色

1 个答案: