首页 > 代码库 > JQ特效开发系列——鼠标移入时div高度和颜色发生变化 animate

JQ特效开发系列——鼠标移入时div高度和颜色发生变化 animate

2024-07-08 19:35:21   225人阅读

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>

JS——JQ实现代码：

<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"} )


联系
我们