JQuery animate动画应用示例

本文实例讲述了JQuery animate动画。分享给大家供大家参考，具体如下：

滑动选项卡

  
  
  
    .btns input{
      width: 100px;
      height: 40px;
      background-color: grey;
      border: 0;
    }
    .btns .current{
      background-color: gold;
    }
    .cons .slides div{
      width: 500px;
      height: 300px;
      background-color: gold;
      
      text-align: center;
      line-height: 300px;
      font-size: 30px;
      float: left;
    }
    .cons{
      width: 500px;
      height: 300px;
      overflow: hidden; 
      position: relative;
    }
    .slides{
      width: 1500px;
      height: 300px; 
      position: absolute;
    }
    .cons .active{
      display: block;
    }
  
  
  


  
    
    
    
  
  
    
      选项卡1的内容
      选项卡2的内容
      选项卡3的内容
    
  

将slides下面的div由隐藏改为浮动，将cons设置成绝对定位，将slides改为相对定位。超过cons的slides隐藏。
点击事件发生之后，相对定位改变。

animate动画

$div=$('#div1');
$div.animate({
  width:300,
  height:300
},1000,'swing',function () {
  alert('done');
})

  
  
  
  
  
    .box{
      width: 100px;
      height: 100px;
      background-color: gold;
    }
  


  

用animate动画改变box大小，完成之后用回调函数弹出done

感兴趣的朋友可以使用如下工具测试上述代码运行效果：

在线HTML/CSS/Javascript代码运行工具：
http://tools.jb51.net/code/HtmlJsRun

在线HTML/CSS/Javascript前端代码调试运行工具：
http://tools.jb51.net/code/WebCodeRun

更多关于jQuery相关内容还可查看本站专题：《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。