jquery学习(六)-jquery中的动画

参考锋利的jQuery第二版

1.show和hide方法

  调用方法:element.hide()隐藏元素,element.show()显示元素。其实说白了,其原理就是将元素的样式display值设置为none或block。

若想让元素慢慢隐藏或显示,可以为其添加一个速度的参数,如element.show(500),表示元素会在500毫秒内慢慢显示出来。

2.fadeIn和fadeOut方法

  fadeIn和fadeOut分别是实现元素淡入和淡出的方法。其原理是通过一段时间内改变元素的不透明度(opacity)动画来实现淡入淡出的效果的,直到元素最终显示(display:block)或消失(display:none)。

可设置动画时长,如element.fadeOut(500)。

3.slideUp和slideDown方法

  slideUp和slideDown分别实现上收隐藏和下拉显示的功能。其原理是通过改变元素的高度动画来实现的。如果一个元素的display:none,通过调用slideDown方法是,使得元素由上至下延伸显示。slideUp刚好与slideDown相反。

可设置动画时长,如element.slideDown(500)。

4.自定义动画方法animate

  方法使用animate(params,speed,easing,callback)

  Params: 一组包含作为动画属性和终值的样式属性和及其值的集合。

  Speed:s三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)。

  Easing: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。

  Callback:回调函数。

        例如:element.animate({ height: '20px' }, 500,'ease-out',
                          function(){console.log(“改变高动画”)});

5.停止动画stop(clearQueue,gotoNnd)

  clearQueue和gotoEnd都是可选参数,为Bool值。clearQueue表示是否清空当前未执行完的动画队列,gotoEnd表示是否将正在执行的动画跳转到末状态。

  举个栗子:

  $(element).hover(function(){

         $(this).stop(false,true).animate({height:”300px”},200)

                     .animate({”200px”},300);

  },function(){

         $(this).stop(false,true).animate({height:”30px”},200)

                     .animate({”20px”},300);

  });

6.判断处于动画状态

  在使用动画的时候往往为了防止动画的积累,导致动画与用户行为不一致。此时就需要我们知道当前元素是否处于动画状态,当元素不出于动画阶段到为其添加动画,否则不添加。

  举个栗子:

  If(!$(element).is(“:animated”)){

         //当没有动作状态时,才添加动画

  }

7.动画延迟delay()

            Delay方法允许我们将队列中的函数延迟执行。

                     $(element).animate({”20px”},300).delay(1000)    //延迟1000毫秒

                            . animate({”200px”},300);

8.toggle方法元素状态切换

           $(element).toggle(fn1,fn2,fn3…)轮流循环切换。

9.slideToggle方法

  通过高度变化来切换匹配元素的可见性。即实现元素下拉显示和上滑隐藏切换。

   $(element).slideToggle();

原文地址:https://www.cnblogs.com/hcw136156133/p/5086915.html