JQ特效开发系列——鼠标移入时div高度和颜色发生变化 animate
需要展示的jQuery效果：
同一级别下有5个div，当鼠标移上任意一个div的时候，该div背景颜色和高度都发生变化，移出时背景颜色和高度都恢复为原来设置的样式，高度的变化过程是渐变，背景颜色的变化在高度变化之后进行。
基本结构样式代码：
<style>
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.main div{
width: 800px;
height: 80px;
margin-bottom: 10px;
background: #fcc;
}
</style>
<body>
<div id="main" class='main'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<script src="jquery-1.7.2.js"></script>
<script>
$(function () {
$('#main div').hover(
function(){
var _this = $(this);
$(this).animate({
"height" : "100px"
},600,function(){
_this.css({"background" : "#ccf"});
});
},function(){
var _this = $(this);
$(this).animate({
"height" : "80px"
},600,function(){
_this.css({"background" : "#fcc"});
});
}
)
});
</script>
animate( )注意事项：
animate( )可以操作实现渐变的效果，不过只是针对于可以用数字定义的样式组，比如width、height、left、top等。
对于backgroundPosition，以下写法无效：
animate( {"backgroundPosition": "50px 50px"} )
可以采取以下写法：
animate( {"backgroundPositionX": "50px", "backgroundPositionY": "50px"} )
浙公网安备 33010602011771号