It's my first post here and my English ... Yeah...
这是我在这里的第一篇文章和我的英文...是啊......
I want to change my background-color with a fadeIn/Out - I think so - when I do a mouseover over my '#bg2'.
我想用fadeIn / Out改变我的背景颜色 - 我想是这样 - 当我将鼠标悬停在'#bg2'上时。
This is the code I use:
这是我使用的代码:
$(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>I've got three div's with id's: bg1, bg2 and bg3.
我有三个带有id的div:bg1,bg2和bg3。
The color don't care. I can change the background-colr without problems... but HOW it change... I don't like. I want it to fade a little bit with fadeIn or Out.
颜色不在乎。我可以毫无问题地改变background-colr ......但它如何改变......我不喜欢。我想用淡入淡出或淡出淡出一点点。
But when I fade the 'Body' in or out the whole website fades with it.
但是,当我将“身体”淡入或淡出时,整个网站就会消失。
Does anyone know a way to do this?
有谁知道这样做的方法?
3 个解决方案
#1
2
Add this CSS to your stylesheet. It will give a fadeIn - fadeout kind of animation
将此CSS添加到样式表中。它将提供fadeIn - fadeout类型的动画
body {
transition: background-color 0.5s ease;
}
#2
0
The best way to do this is probably with css3 transitions:
执行此操作的最佳方法可能是使用css3过渡:
body{
/* Other Css */
transition: background-color 0.2s ease;
/* transition: property duration timing-function; */
}
Then every time you change the background-color of body it will animate the colors.
然后每当你改变身体的背景颜色时,它将为颜色设置动画。
#3
0
The pure jQuery does not have functionality to animate colors. You have to use jQueryUI or jQuery color plugin.
纯jQuery没有动画颜色的功能。你必须使用jQueryUI或jQuery颜色插件。
Then use .animate() function.
然后使用.animate()函数。
#1
2
Add this CSS to your stylesheet. It will give a fadeIn - fadeout kind of animation
将此CSS添加到样式表中。它将提供fadeIn - fadeout类型的动画
body {
transition: background-color 0.5s ease;
}
#2
0
The best way to do this is probably with css3 transitions:
执行此操作的最佳方法可能是使用css3过渡:
body{
/* Other Css */
transition: background-color 0.2s ease;
/* transition: property duration timing-function; */
}
Then every time you change the background-color of body it will animate the colors.
然后每当你改变身体的背景颜色时,它将为颜色设置动画。
#3
0
The pure jQuery does not have functionality to animate colors. You have to use jQueryUI or jQuery color plugin.
纯jQuery没有动画颜色的功能。你必须使用jQueryUI或jQuery颜色插件。
Then use .animate() function.
然后使用.animate()函数。