码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-06-20 20:13:00      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:style   class   http   com   width   os   

bubuko.com,布布扣

 

需要展示的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"} )

JQ特效开发系列——鼠标移入时div高度和颜色发生变化 animate,布布扣,bubuko.com

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

标签:style   class   http   com   width   os   

原文地址:http://www.cnblogs.com/hr2014/p/3796119.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!