jQuery 自学笔记

Posted 2022-01-28 Xiu Yan

文章目录

• • jQuery动画
  • 一、三组基本动画
  • • 1.1 显示与隐藏
    • 1.2 滑入与滑出
    • 1.3 淡入与淡出
  • 二、自定义动画
  • 三、动画队列与停止动画

---

jQuery动画

一、三组基本动画

1.1 显示与隐藏

• 显示：show(参数1， 参数2)

  • 参数1：代表动画执行的时长，
    毫秒数也可以是代表时长的字符串 fast normal slow 分别代表 200毫秒 400毫秒 600毫秒
    注意：如果代表时长的单词写错了，就相当于写了一个normal
  • 参数2：代表动画执行完毕的回调函数

  $('#btn').click(function () 
  	//给id位div1的元素动画显示
  	//如果show()这个方法没有参数，那就没有动画效果
  	$('#di v1').show(200, function () 
  		alert('动画执行完毕！');
  	)
  )
  

• 隐藏：hide(参数同上)

  $('#btn').click(function () 
  	//没有参数没有动画效果
  	//$('#div1').hide();
  	//代表动画隐藏的时长
  	$('#div1').hide(400);
  	$('#div1').hide(400,function () 
  		alert('动画隐藏完毕！');
  	)
  )
  

• 切换

  $('#btn').click(function () 
  	//如果元素是隐藏状态就动画显示；否则隐藏
  	//$('#div1').toggle();
  	//切换时常2000毫秒
  	//$('#div1').toggle(2000);
  	$('#div1').toggle(1000,function () 
  		alert('切换完成');
  	);
  )
  

效果如下：

---

1.2 滑入与滑出

效果与卷帘相似

• 滑入：slideDown(参数1， 参数2)

  • 参数1：动画执行时长
  • 参数2：动画执行完毕后执行的回调函数

  $('#btn').click(function () 
  	//让id为div1的元素滑入
  	//$('#div1').slideDown();//相当于给了一个默认时长，normal 400毫秒
  	$('#div1').slideDown(400, function () 
  		alert('执行完毕');
  	);
  )
  

• 滑出：slideUp(参数同上)

  $('#btn').click(function () 
  	$('#div1').slideUp(400,function () 
  		alert('滑出完成');
  	);
  )
  

• 切换：slideToggle(参数同上)

  $('#btn').click(function () 
  	$('#div1').slideToggle(400,function () 
  		alert('切换完成');
  	);
  )
  

效果如下：

---

1.3 淡入与淡出

• 淡入：fadeIn(参数1， 参数2)

   $('#btn').click(function () 
  	//让id位div1的这个元素淡入
  	//$('#div1').fadeIn();//不给参数相当于给了一个默认的动画时长，normal 400毫秒
  	//$('#div1').fadeIn(800);
  	$('#div1').fadeIn(200,function () 
  		alert('淡入完成了');
  	);
  )
  

• 淡出：fadeOut(参数同上)

  $('#btn').click(function () 
  	$('#div1').fadeOut(400);
  )
  

• 切换：fadeToggle(参数同上)

  $('#btn').click(function () 
  	$('#div1').fadeToggle(400);
  )
  

• 淡入到哪里 fadeTo(参数1，参数2，参数3， 参数4)

  • 参数1：淡入的时长（必选）
  • 参数2：透明度（必选）
  • 参数3：淡入的速度（可选）可能的值：
    “swing”：在开头/结尾移动慢，在中间移动快
    “linear”：匀速移动
  • 参数4： 回调函数（可选）

  $('#btn').click(function () 
  	$('#div1').fadeTo(1000, 0.5);//耗时1000毫秒 淡入到透明度位0.5
  )
  

效果如下：

---

二、自定义动画

语法： animate(参数1，参数2，参数3，参数4)

1. 参数1：必选的 对象 代表的是需要做动画的属性
2. 参数2：可选的 代表执行动画的时长
3. 参数3：可选的 easing 代表的是缓动还是
   • 匀速 linear(匀速)
   • swing(缓动) 不写是缓动
4. 参数4：可选的 动画执行完毕后的回调函数

$('#btn').click(function () 
	//让 id 位 div1 的元素动画移动到8000那个位置
	$('#div1').animate(
		left:800,
		width:200,
		height:200,
		opacity:0.5
	, 800, 'linear',function () 
		alert("完毕！");
	);//匀速 

	// 执行连续动画
	$('#div2').animate(
		left:800
	, 800, 'swing');//默认不写是缓动
	
	$('#div1').animate(
		left:800,
		width:200,
		height:200,
		opacity:0.5
	, 800, 'swing',function () 
		$('#div1').animate(
			left:400,
			width:500,
			height:500,
			opacity:0.8,
			top:150
		,2000,function () 
			$('#div1').animate(
			left:800,
			width:200,
			height:200,
			opacity:0.5
		,2000,'linear')
	)
);//匀速

---

三、动画队列与停止动画

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行，执行以下代码就会出现问题，如下图：

$('#start').click(function()
	$('#div1').slideDown(1000).slideUp(1000);
)

遇到以上的问题，需要清除队列

• stop(参数1，参数2)： 停止动画效果
  • 参数1：是否清除队列
  • 参数2：是否跳转到最终效果
    1. 若为 true，则动画会突然跳转到最终效果
    2. 若为 false，动画会停止运行
• 一般采用链式编程的方式 添加.stop(true, false)

采用stop(true, true)：

采用stop(true, false)：

---