jQuery学习笔记(7)--动画实现

JavaScript实现动画的原理：以固定的时间间隔，修改DOM元素的CSS样式。

show()和hide()
从左上角逐渐展开或收缩的
hide()执行时候相当于添加了display:none这个css样式，show的时候去掉了
如果添加了时间后，就是在慢慢修改对应的width和height直到为0，然后再变成display:none,最后再把width和height变成原来的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script> 
</head>
<body>
<div  id="test-show-hide">
<p>我不见啦</p>
</div>
</body>
</html>

var div = $('#test-show-hide');//选中div
div.hide(3000); // 在3秒钟内逐渐消失 ,时间以毫秒为单位
div.show(3000); // 在3秒钟内逐渐显示

测试一下，感觉就是逐步缩小div的范围到最后消失，反过来就是逐步扩大显示div的范围,效果还不错

参数除了是时间,也可以是’slow’，'fast’这些字符串

div.hide('slow'); //这个跟刚才的效果不太一样，这个感觉就只有字符那个地方有变化
div.show('fast'); //太快了，没反应过来

刚才测试也看出来了，我们需要主动去判断应该是show还是hide,但是toggle()方法则根据当前状态决定是show()还是hide()

div.toggle('slow');//会根据当前状态自动判断，比较智能
div.toggle('fast');//

slideUp / slideDown
在垂直方向逐渐展开或收缩的
跟刚才类似，只不过是在过程当中只是修改height的值
slideUp()把一个可见的DOM元素收起来，效果跟拉上窗帘似的，slideDown()相反，而slideToggle()则根据元素是否可见来决定下一步动作

 div.slideUp(3000); // 在3秒钟内逐渐向上消失
 div.slideDown(3000); // 在3秒钟内逐渐向下出现
 div.slideUp('slow');
 div.slideDown('slow');
 div.slideToggle('slow');//自动判断
 div.slideToggle('fast');

fadeIn / fadeOut的动画效果是淡入淡出，也就是通过不断设置DOM元素的opacity属性来实现，而fadeToggle()则根据元素是否可见来决定下一步动作
原理是不断调整opacity直到为0，然后display:none,再把opacity变成1

div.fadeOut('slow'); // 慢慢淡出 
div.fadeIn('slow'); // 慢慢显示 
div.fadeToggle('slow');//自动判断

自定义动画
如果上述动画效果还不能满足你的要求，那就祭出最后大招：animate()，它可以实现任意动画效果，我们需要传入的参数就是DOM元素最终的CSS状态和时间，jQuery在时间段内不断调整CSS直到达到我们设定的值

div.animate({ opacity: 0.25, width: '256px', height: '256px'  }, 3000); // 在3秒钟内CSS过渡到设定值

animate()还可以再传入一个函数，当动画结束时，该函数将被调用

 div.animate({ opacity: 0.25, width: '256px', height: '256px' }, 3000, function () { alert('动画已结束');div.css('opacity', '1.0').css('width', '128px').css('height', '128px'); });//在3秒内慢慢变淡，然后执行alert语句，点击确定后又恢复成原样
 div.animate({ opacity: 0.25, width: '256px', height: '256px' }, 3000, function () { alert('动画已结束');$(this).css('opacity', '1.0').css('width', '128px').css('height', '128px'); });//两个是等效的$(this)就相当于是div

有了animate()，你就可以实现各种自定义动画效果了
串行动画
jQuery的动画效果还可以串行执行，通过delay()方法还可以实现暂停，这样，我们可以实现更复杂的动画效果

div.slideUp(2000).delay(1000).slideDown(2000).delay(1000).animate({ width: '256px', height: '256px' }, 2000).delay(1000).animate({ width: '128px', height: '128px' }, 2000);//串行，相当于一个div.slideDown执行完后返回一个div再执行delay再返回再执行再返回,最后总的效果就是先消失->暂停->出现->暂停-<变宽->暂停->变小

因为动画需要执行一段时间，所以jQuery必须不断返回新的Promise对象才能后续执行操作。简单地把动画封装在函数中是不够的。

有的动画如slideUp()根本没有效果。这是因为jQuery动画的原理是逐渐改变CSS的值，如height从100px逐渐变为0。但是很多不是block性质的DOM元素，对它们设置height根本就不起作用，所以动画也就没有效果。此外，jQuery也没有实现对background-color的动画效果用animate()设置background-color也没有效果

jQuery学习笔记(7)--动画实现

猜你喜欢