jQuery内置动画样式-学习笔记

最新推荐文章于 2022-10-10 20:40:03 发布

原创最新推荐文章于 2022-10-10 20:40:03 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #动画

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了jQuery中各种动画效果的使用方法，包括渐显渐隐、滑动、淡入淡出等基本动画，以及如何利用animate方法实现自定义动画效果。此外，还介绍了如何通过串联动画和延迟效果来创建更复杂的动画序列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

show()/hide()：从左上角逐渐展开或收缩；

直接以无参数形式调用show()和hide()，会显示和隐藏元素，只要传递一个时间参数（或者'slow'、'fast'这些字符串）进去，就变成了动画；

div.hide(3000);//在3秒内逐渐消失。
div.show('slow');//在0.6秒内逐渐显示

toggle()：根据当前状态决定是show()还是hide()。

slideUp()/slideDown()：在垂直方向逐渐展开或收缩的

slideUp()把一个可见的DOM元素收起来，效果跟拉上窗帘似的，slideDown()相反，而slideToggle()则根据元素是否可见来决定下一步动作。

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

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

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

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

div.animate({
   opacity:0.25,
   width:'256px',
   height:'256px'
},3000,function(){
   console.log("动画已结束！");
  $(this).css('opacity','1.0').css('width','128px').css('height','128px');
});

串行动画：

jQuery的动画效果还可以串行执行，通过delay()方法还可以实现暂停。

//滑出-暂停-放大-暂停-缩小
div.slideDown(2000)
   .delay(1000)
   .animate({
       width:'256px',
       height:'256px'
    },2000)
    .delay(1000)
    .animate({
        width:'128px',
        height:'128px'
     },2000);