标签:span anim 停止 运行 animate jquer har code trigger
<!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>
标签:span anim 停止 运行 animate jquer har code trigger
原文地址:http://www.cnblogs.com/hack-ing/p/6166035.html