0

我制作了这个非常基本的脚本，它只是在将鼠标悬停在 div 上时更改背景图像。好吧，图像会像maby .1sec一样在很短的时间内闪烁白色，然后执行过渡。我似乎无法解决这个问题？这是基本代码：

$(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 的过渡方面也遇到了麻烦。

4

1 回答 1

1

如果将 .css 添加transition到 css 文件中会发生什么？也就是说，不是通过 jQuery 添加过渡，而是直接将它们添加到您的bodycss 声明中。

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");
    }); 
});
于 2013-10-23T01:20:27.313 回答