Question

我正在尝试切换元素的background图像（例如body），当悬停在另一个图像时（例如nav），在两个图像之间使用某种淡入淡出过渡jQuery的。

我在stackoverflow上一直在阅读类似的问题，几乎每个例子都没有运气。

资源

的index.html
styles.css的
scripts.js中
background.png
背景hover.png

片段

的index.html

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

styles.css的

body {
    background: url('background.jpg') no-repeat;
}

scripts.js中

$('nav')
    .mouseenter(function(){
        $('body').css("background", "url('background-hover.jpg') no-repeat");
    })
    .mouseleave(function(){
        $('body').css("background", "url('background.jpg') no-repeat");
    });

任何建议都将不胜感激。非常感谢。

Answer 1

如果您希望在背景之间进行淡入淡出过渡，则无法通过仅将background-image从一个更改为另一个来完成。你至少需要创建一个可以淡入淡出的元素。例如：

var d = $('<div />').width($('body').width())
    .height($(window).height())
    .attr('id','fakebody').hide().appendTo($('body'));

$('nav').hover(function(){
     $(d).fadeIn();
},function(){
     $(d).fadeOut();   
});

#fakebody{
    position:absolute;
    top:0;
    left:0;
background:    url(background.jpg);
        z-index:-99;
}

示例：http://jsfiddle.net/niklasvh/bXMKJ/

如果你希望当前图像淡入淡出而另一个淡入，那么你需要有2个虚拟元素，因为你不能淡化body（至少你想要的结果））。

如果您只是希望background-image从一个更改为另一个，那么您可以通过删除mouseenter函数末尾的;来修复代码，如下所示：

$('nav').mouseenter(function(){
        $('body').css("background", "url('background-hover.jpg') no-repeat");
    }).mouseleave(function(){
        $('body').css("background", "url('background.jpg') no-repeat");
    });

示例：http://jsfiddle.net/niklasvh/sC5rd/

Answer 2

不应该......

$('nav').mouseenter(function(){
        $('body').css("background", "url('background-hover.jpg') no-repeat");
    });
$('nav').mouseleave(function(){
        $('body').css("background", "url('background.jpg') no-repeat");
    });

注意额外的'nav'元素事件绑定。

Answer 3

脚本：

$(document).ready(function(){
    $('nav').mouseenter(function(){
           $('body').css("background", "url('background-hover.jpg') no-repeat");
    });
    $('nav').mouseleave(function(){
           $('body').css("background", "url('background.jpg') no-repeat");
    });

});

风格：

nav {
    border:1px green solid;
    width:150px;
}
body {
    background-image:url(background.jpg);
    background-repeat:no-repeat;
}

这样可行，但如果你想淡入淡出，你应该使用另一个元素，比如“div”。

使用jQuery悬停另一个元素时动画元素背景图像

3 个答案: