Question

jQuery增加div背景切换效果问题

一个div设置了背景图片，当鼠标移到div上后背景变为另一张图片，怎样写jQuery代码使得这一变化之间有动作，比如fadeTo之类

Answer 1

用css3的动画属性更佳，为div加上一个过度效果：
.div { background:url(1.jpg); transition-duration:1s; width:100px; height:100px;}
.div:hover { background:url(2.jpg);}
会让你有惊喜的

css3的动画效果非常流畅，而且更易维护，只是对IE8以下不支持。

jQuery方法改变背景可以用替换css样式方法，这个方法做不了动画效果，要制作动画效果建议用绝对定位来做，思路是：

建立1个div样式，定位relative，2个内部div，宽度、高度与div相同，定位：absolute，设置2个div的各自背景，如果div中要显示内容，要注意z-index的设置，先设置-1，当作背景，如果某浏览器不能正常显示，就把z-index设置0，div中的内容设置z-index>0，Jquery当hover时fadeOut div1，fadeIn div2。
.div { position:relative; width:...........}
.divbg1 {position:absolute; background:url(1.jpg); width:...........}

.divbg2 {position:absolute; background:url(2.jpg); width:...........}

HTML:
<div class='div'>
<div class='divbg1'></div>

</div>

JS:
$(function(){
$('.div').hover(function(){
$(this).find('.divbg1').fadeOut(300);
$(this).find('.divbg2').fadeIn(300);
},function(){
$(this).find('.divbg2').fadeOut(300);
$(this).find('.divbg1').fadeIn(300);
})

})

代码手写，未经测试，有问题再追问

追问

css3试过，但貌似没有jQuery中fadeTo的效果，因为我目前就是要那种效果哈。另外div中嵌入div感觉有点复杂了，不适合用来做导航

追答

做导航来说，最适合的就是css3，效率和动画效果最好。
div嵌入div是没有办法的事情，你要求的fade动画，原理就是一个渐隐一个渐显，那么在一个背景上是无法实现的，用2个div看似复杂，还是很容易维护的。
再或者就是flash，或者背景是gif动画的fade效果，都是可以考虑的。