我正在尝试将元素(例如background)悬停在另一个元素(例如body)上时切换元素的nav图像,使用jQuery在两个图像之间进行某种淡入淡出过渡。

我一直在stackoverflow上阅读过类似的问题,并且几乎在没有运气的情况下尝试了几乎所有示例。

资源资源


index.html
styles.css
scripts.js
background.png
background-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");
    });


任何建议将不胜感激。在此先感谢。

最佳答案

如果要在背景之间进行淡入淡出过渡,则不能仅将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/

10-05 20:25
查看更多