jQuery特效实战开发 - 实例：大小位置会运动变化的文字信息

2015/04/28 20:10:00 | 作者：HTML5学堂（码匠） | 分类：jQuery实战开发 | 关键词：JQ特效,animate,动画,jQuery

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

HTML5学堂：对于jQuery的学习，我们并不建议一个方法一个方法去记忆。或者说，记忆方法虽然是必要的，但是更重要的是应用。所谓条条大路通罗马，有时候同一个功能，可以用十几种方法来实现。因此，学习jQuery，应用才是王道。

效果需求

同一级别下有5个div，当鼠标移上任意一个div的时候，该div背景颜色和高度都发生变化，移出时背景颜色和高度都恢复为原来设置的样式，高度的变化过程是渐变，背景颜色的变化在高度变化之后进行。

效果展示

效果实现

结构代码

<body>
<div id="main" class='main'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>

欢迎沟通交流~HTML5学堂

样式代码

<style>
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.main div{
width: 800px;
height: 80px;
margin-bottom: 10px;
background: #fcc;
}
</style>

行为代码

<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( )可以操作实现渐变的效果，不过只是针对于可以用数字定义的样式组，比如width、height、left、top等。对于backgroundPosition，以下写法无效：animate( {"backgroundPosition": "50px 50px"} )可以采取以下写法： animate( {"backgroundPositionX": "50px", "backgroundPositionY": "50px"} )

欢迎沟通交流~HTML5学堂