jquery的动画方法

Posted 2020-12-27 luluyang

1.)show()和hide()，会显示和隐藏DOM元素。但是，只要传递一个时间参数进去，就变成了动画,从左上角逐渐展开或收缩的:

div.hide(3000); // 在3秒钟内逐渐消失

toggle()方法则根据当前状态决定是show()还是hide()

2.)slideUp()和slideDown()是在垂直方向逐渐展开或收缩的。slideToggle()则根据元素是否可见来决定下一步动作:

div.slideUp(3000); // 在3秒钟内逐渐向上消失

3.)fadeIn()和fadeOut()的动画效果是淡入淡出，也就是通过不断设置DOM元素的opacity属性来实现，而fadeToggle()则根据元素是否可见来决定下一步动作：

div.fadeOut(‘slow‘); // 在0.6秒内淡出

jQuery的动画效果还可以串行执行，通过delay()方法还可以实现暂停，这样，我们可以实现更复杂的动画效果，而代码却相当简单：

// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小

div.slideDown(2000) .delay(1000) .animate({ width: ‘256px‘, height: ‘256px‘ }, 2000) .delay(1000) .animate({ width: ‘128px‘, height: ‘128px‘ }, 2000); }