HTML5学堂-码匠 HTML5学堂

您当前位于:jQuery 实战开发 ——> jQuery特效实战开发 - 实例:大小位置会运动变化的文字信息

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

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

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

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

效果需求

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

效果展示

HTML5学堂 鼠标移入时div高度和颜色发生变化 H5course

效果实现

结构代码

  1. <body>
  2.     <div id="main" class='main'>
  3.         <div></div>
  4.         <div></div>
  5.         <div></div>
  6.         <div></div>
  7.         <div></div>
  8.     </div>
  9. </body>

欢迎沟通交流~HTML5学堂

样式代码

  1. <style>
  2.     * {
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.     html,body {
  7.         height: 100%;
  8.     }
  9.     .main div{
  10.         width: 800px;
  11.         height: 80px;
  12.         margin-bottom: 10px;
  13.         background: #fcc;
  14.     }
  15. </style>

行为代码

  1. <script>
  2.     $(function () {
  3.         $('#main div').hover(
  4.             function(){
  5.                 var _this = $(this);
  6.                 $(this).animate({
  7.                     "height" : "100px"
  8.                 },600,function(){
  9.                     _this.css({"background" : "#ccf"});
  10.                 });
  11.             },function(){
  12.                 var _this = $(this);
  13.                 $(this).animate({
  14.                     "height" : "80px"
  15.                 },600,function(){
  16.                     _this.css({"background" : "#fcc"});
  17.                 });
  18.             }
  19.         )
  20.     });
  21. </script>

注意事项

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

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS