有4个div。所有都有背景图片,当你将鼠标悬停在div1上时,脚本应该更改div 2,3,4中的背景图像。这应该是动画的(fadein?)。
这是在jquery“通过实践学习”之后获得的代码,但是我无法让jquery为它设置动画。
HTML:
<div class="categories" style="color:#ccc;">
<div class="single_cat first"></div>
<div class="single_cat second"></div>
<div class="single_cat third"></div>
<div class="single_cat fourth"></div>
</div>
的CSS:
#tour .categories{
width: 950px;
height: 236px;
background-color: #efefef;
margin: 20px 0 0 0;
}
.single_cat {
width: 236px;
height: inherit;
margin: 0 2px 0 0;
float: left;
background-color: #222;
color: #fff;
}
.single_cat.fourth {
width: 236px;
height: inherit;
margin: 0;
float: left;
background-color: #222;
}
.single_cat.first {
background-image:url('/img/takethetour/r_text.png');
}
.single_cat.second {
background-image:url('/img/takethetour/b_text.png');
}
.single_cat.third {
background-image:url('/img/takethetour/c_text.png');
}
.single_cat.fourth {
background-image:url('/img/takethetour/bou_text.png');
}
jquery(java):
$(".first").mouseover(function() {
$(".second").css('background', 'url(/img/takethetour/r_2.png)');
$(".third").css('background', 'url(/img/takethetour/r_3.png)');
$(".fourth").css('background', 'url(/img/takethetour/r_4.png)');
}).mouseout(function(){
$(".second").css('background', 'url(/img/takethetour/b_text.png)');
$(".third").css('background', 'url(/img/takethetour/c_text.png)');
$(".fourth").css('background', 'url(/img/takethetour/bou_text.png)');
});
$(".second").mouseover(function() {
$(".first").css('background', 'url(/img/takethetour/b_2.png)');
$(".third").css('background', 'url(/img/takethetour/b_3.png)');
$(".fourth").css('background', 'url(/img/takethetour/b_4.png)');
}).mouseout(function(){
$(".first").css('background', 'url(/img/takethetour/r_text.png)');
$(".third").css('background', 'url(/img/takethetour/c_text.png)');
$(".fourth").css('background', 'url(/img/takethetour/bou_text.png)');
});
$(".third").mouseover(function() {
$(".first").css('background', 'url(/img/takethetour/c_2.png)');
$(".second").css('background', 'url(/img/takethetour/c_3.png)');
$(".fourth").css('background', 'url(/img/takethetour/c_4.png)');
}).mouseout(function(){
$(".first").css('background', 'url(/img/takethetour/r_text.png)');
$(".second").css('background', 'url(/img/takethetour/b_text.png)');
$(".fourth").css('background', 'url(/img/takethetour/bou_text.png)');
});
$(".fourth").mouseover(function() {
$(".first").css('background', 'url(/img/takethetour/bou_2.png)');
$(".third").css('background', 'url(/img/takethetour/bou_3.png)');
$(".second").css('background', 'url(/img/takethetour/bou_4.png)');
}).mouseout(function(){
$(".first").css('background', 'url(/img/takethetour/r_text.png)');
$(".third").css('background', 'url(/img/takethetour/c_text.png)');
$(".second").css('background', 'url(/img/takethetour/b_text.png)');
});
答案 0 :(得分:0)
背景图片无法设置动画。只能为颜色或其他标量值设置动画。
答案 1 :(得分:0)
如果你正在寻找首先淡出的非徘徊的div,然后用新的背景淡出,你需要这样的东西:
$(".first").mouseover(function() {
$(".second").fadeOut('slow',function(){
$(this).css('background', 'url(/img/takethetour/r_2.png)').fadeIn('slow');
});
答案 2 :(得分:0)
如果您需要背景图像直接从一个到另一个淡入淡出,您可以尝试将一个div嵌套在另一个div中作为背景。将内部div的背景设置为默认背景,将外部div的背景设置为悬停的背景。然后,你可以淡入淡出内部div。
请记住,您不希望在内部背景div中放置任何内容,因为它会淡出(除非这是您想要的) - 您将希望另一个兄弟div包含内容。可能需要一些CSS才能正确定位所有内容,具体取决于您的页面布局方式。
这是其中一个的基本思路,但请记住,您可能需要使用div的定位和大小调整,以便它们正确重叠。
<div class="div1outer"> <!-- has one background -->
<div class="div1bg"></div> <!-- has the other background -->
<div class="div1content"></div> <!-- has the content -->
</div>
答案 3 :(得分:0)
另一种方法可能是将它们作为img,并使用较低的z-index对它们进行样式化,以将它们分层放在其他内容之后。这可以产生与将它们作为“背景”相同的效果,而不受背景的限制 - 例如。现在可以使用jquery fadeIn对它们进行动画处理。有点hacky,但完成工作。