jquery-常用的运行函数-优快云博客

本文详细介绍了jQuery中动画效果的实现方法，包括基本的动画属性设置、运动时间和速度曲线的控制，以及如何通过链式调用实现复杂动画效果。此外，还讲解了事件绑定与触发的使用技巧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery--运动函数</title>
  <style>
  .print1{width: 500px; height: 300px; background: yellow;}
   .print2{width: 800px; height: 300px; background: red;}
  </style>
  <script src='../jquery-3.1.1.min.js'></script>
  <script>
  $(function(){
 /*     $('.print1').click(function(){
       // $(this).animate({width:300,height:300});
        // $(this).animate({width:300,height:300},800);

         $(this).animate({width:300},800,'linear',function(){$(this).animate({height:100},800,'linear')})});*/
          // $('li').on('click',function(){this.style.background='red';});
     // .delegate() 事件委托方法
  /*      $('ul').delegate('li','click',function(){$(this).css('background','red');});*/
       $('.print1').on('click',{name:'nihao'},function(ev){
           console.log(ev.data.name);
       })
  });
  </script>
    </head>
<body>
    <div class="print1">



   </div>
     <div class="print2">
           $(this).animate({width:300,height:300});第一个参数运动属性和值；<br/>
        $(this).animate({width:300,height:300},800);第二个参数运动的时间<br/>
        $(this).animate({width:300,height:300},800,'linear');第三个参数linear慢快慢;linear均速<br/>
            $(this).animate({width:300},800,'linear',function(){$(this).animate({height:100},800,'linear')})添加函数，链式运动<br/>
            stop();阻止当前运动 stop(true)； 阻止后续运动stop(true,true,true)；立即停止到指定目标点<br/>
            .delay(); 延迟方法；<br/>
            .delegate() 事件委托方法   trigger()主动触发函数<br/>
            ev.data; 获取事件数组；  ev.target当前操作的事件类型； ev.type操作属性<br/>

     </div>
   <ul>
   <li>11</li>
   <li>22</li>
   <li>33</li>
   <li>44</li>
   </ul>
</body>
</html>