<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动方法</title>
<style type="text/css">
div{width: 100px;height: 100px;background: red;margin: 10px;}
</style>
<script type="text/javascript" src="../jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#div1').click(function(){
$(this).animate({width:300},2000,'linear',function(){
//alert('123');
$(this).animate({height:300})//width的变化用了2000毫秒,height的变化很快
});
})
// $('#div2').click(function(){
// $('#div1').stop();默认阻止当前的运动
// $('#div1').stop(true);阻止后续的运动
// $('#div1').stop(ture,ture)可以立即停止到目标点
// $('#div1').finish();立即停止到所有制定的目标点
// })
// $('#div1').on('click',function(){
// alert(123);//当点击div时才会弹窗
// })
//$('#div1').trigger('click');//打开页面就会显示,自动调用click
})
$(function(){
// $('li').click(function(){
// $(this).css('background','red')
// }) 事件是加在元素li上 以上的效果可以用时间委托delegate()完成
$('ul').delegate('li','click',function(){
$(this).css('background','red')
}) //事件是加在元素ul上
})
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
</body>
</html>
<!--
animate():执行CSS属性集的自定义动画,该方法通过CSS样式将元素从一个状态改变为另一个状态,只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
第一个参数:{},可以有多个属性和值。
第二个参数:时间,控制运动的快慢。
第三个参数:运动形式,只有两种运动形式,默认swing(慢快慢),linear(匀速)
第四个参数:回调函数
stop():让jquery中的运动停下来
delay():延迟,里面的时间表示延迟的时间
jquery中时间委托的方法
delegate():事件委托,例如ul和li,对li的操作利用事件委托可以只对ul操作,原理事件冒泡
undegate():阻止事件委托
trigger():主动触发事件,当页面打开,不需要鼠标操作就可以执行的事件
-->
jQuery之动画运动
最新推荐文章于 2023-06-25 20:51:27 发布