这是我的第一篇文章，也是我的英语...是的...
当我将鼠标悬停在'＃bg2'上方时，我想使用fadeIn / Out更改背景颜色。
这是我使用的代码：
$(document).ready(function(){
$('#bg1').mouseover(function(){
$('body').css('background', '#361738')
});
$('#bg2').mouseover(function(){
$('body').css('background', '#880192')
});
$('#bg3').mouseover(function(){
$('body').css('background', '#312431')
});
});.menuWrapper{
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
text-transform:uppercase;
letter-spacing: normal;
line-height: 1.45em;
position:relative;
margin:20px auto;
height:542px;
width:797px;
background-position:0 0;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu{
list-style:none;
width:797px;
}
ul.menu > li{
float:left;
width:265px;
height:542px;
border-right:1px solid #777;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu > li.last{
border:none;
}
.bg1{
background-image: url(../images/1.jpg);
}
.bg2{
background-image: url(../images/2.jpg);
}
.bg3{
background-image: url(../images/3.jpg);
}
ul.menu > li > a{
float:left;
width:265px;
height:50px;
margin-top:450px;
text-align:center;
line-height:50px;
color:#ddd;
background-color:#333;
letter-spacing:1px;
cursor:pointer;
text-decoration:none;
text-shadow:0px 0px 1px #fff;
}
ul.menu > li ul{
list-style:none;
float:left;
margin-top:-180px;
width:100%;
height:110px;
padding-top:20px;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu > li ul li{
display:none;
}
ul.menu > li ul.sub1{
background-image:url(../images/bg1sub.png);
}
ul.menu > li ul.sub2{
background-image:url(../images/bg2sub.png);
}
ul.menu > li ul.sub3{
background-image:url(../images/bg3sub.png);
}
ul.menu > li ul li a{
color:#fff;
text-decoration:none;
line-height:30px;
margin-left:20px;
text-shadow:1px 1px 1px #444;
font-size:11px;
}
ul.menu > li ul.sub1 li{
display:block;
}
ul.menu > li ul li a:hover{
border-bottom:1px dotted #fff;
}<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
padding-top:30px;
background:rgba(102,148,163,1) url(title.png) no-repeat top center;
}
a.back{
background:transparent url(back.png) no-repeat 0px 0px;
position:absolute;
width:150px;
height:27px;
outline:none;
top:2px;
right:0px;
}
.reference{
margin:20px auto;
width:600px;
padding:20px;
}
.reference p a{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#666;
text-decoration:none;
font-size:10px;
}
.reference p a:hover{
color:#333;
}
</style>
<!--[if lte IE 6]>
<link rel="stylesheet" href="css/styleIE6.css" type="text/css" media="screen"/>
<![endif]-->
</head>
<body>
<div id="content">
<div id="menuWrapper" class="menuWrapper bg1">
<ul class="menu" id="menu">
<li class="bg1" style="background-position:0 0;">
<a id="bg1" href="#">Lorem</a>
<ul class="sub1" style="background-position:0 0;">
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Sit</a></li>
</ul>
</li>
<li class="bg1" style="background-position:-266px 0px;">
<a id="bg2" href="#">Amet</a>
<ul class="sub2" style="background-position:-266px 0;">
<li><a href="#">Consetetur</a></li>
<li><a href="#">Sadipscing</a></li>
<li><a href="#">Elitr</a></li>
</ul>
</li>
<li class="last bg1" style="background-position:-532px 0px;">
<a id="bg3" href="#">Shop&Voting</a>
<ul class="sub3" style="background-position:-266px 0;">
<li><a href="#">Vote-Shop</a></li>
<li><a href="#">Voting</a></li>
<li><a href="#">Shop</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bg1').mouseover(function(){
$('body').css('background', '#361738')
});
$('#bg2').mouseover(function(){
$('body').css('background', '#880192')
});
$('#bg3').mouseover(function(){
$('body').css('background', '#312431')
});
});
</script>
<script type="text/javascript">
$(function() {
var current = 0;
var loaded = 0;
for(var i = 1; i <4; ++i)
$('<img />').load(function(){
++loaded;
if(loaded == 3){
$('#bg1,#bg2,#bg3').mouseover(function(e){
var $this = $(this);
if($this.parent().index() == current)
return;
var item = e.target.id;
if(item == 'bg1' || current == 2)
$('#menu .sub'+parseInt(current+1)).stop().animate({
backgroundPosition:"(-266px 0)"
},
300,
function(){
$(this).find('li').hide();
});
else
$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
$(this).find('li').hide();
});
if(item == 'bg1' || current == 2){
$('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
move(1,item);
}
else{
$('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
move(0,item);
}
if(current == 2 && item == 'bg1'){
$('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
}
if(current == 0 && item == 'bg3'){
$('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(266px 0)"},300);
}
current = $this.parent().index();
$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
$(this).find('li').fadeIn();
});
});
}
}).attr('src', '/images/'+i+'.jpg');
function move(dir,item){
if(dir){
$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
$('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
$('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){
$('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
});
}
else{
$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
$('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
});
$('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
$('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},200);
}
}
});
</script>
</body>
</html>我有三个div，其ID为：bg1，bg2和bg3。
颜色不在乎。我可以毫无问题地更改背景色...但是如何更改...我不喜欢。我希望它通过fadeIn或Out淡出一点。
但是，当我淡入或淡出“正文”时，整个网站都会随之淡入。
有人知道这样做的方法吗？
将此CSS添加到样式表中。它将提供一个fadeIn-淡入淡出的动画形式
body {
transition: background-color 0.5s ease;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句