<!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>
时间： 2024-11-25 12:50:07