孙肖宁

jQuery中的动画
显示和隐藏动画show方法作用:让匹配的元素展示出来用法一: 参数为数值类型,表示:执行动画时长 单位为:毫秒(m...
扫描右侧二维码阅读全文
07
2018/05

jQuery中的动画

显示和隐藏动画

show方法

作用:让匹配的元素展示出来

用法一:
参数为数值类型,表示:执行动画时长
单位为:毫秒(ms),参数2000即2秒钟显示完毕
示例:$(selector).show(2000);

用法二:
参数为字符串类型,是jQuery预设的值,共有三个,分别是:slow、normal、fast
跟用法一的对应关系为:slow:600ms、normal:400ms、fast:200ms
示例:$(selector).show(“slow”);

用法三:
参数一可以是数值类型或者字符串类型。参数二表示:动画执行完后立即执行的回调函数。
示例:$(selector).show(2000, function() {});

用法四:
不带参数,作用等同于 css(“display”, ”block”),注意:此时没有动画效果。
示例:$(selector).show();

hide方法

作用:让匹配元素隐藏掉
用法参考show方法。

滑入滑出动画

作用:让元素以下拉动画效果展示出来
示例:$(selector).slideDown(speed,callback);
用法参考show方法。
注意:省略参数或者传入不合法的字符串,那么则使用默认值:400毫秒(同样适用于fadeIn/slideDown/slideUp)

滑出动画效果

示例:$(selector).slideUp(speed,callback);

滑入滑出切换动画效果

示例:$(selector).slideToggle(speed,callback);

淡入淡出动画

淡入动画效果

作用:让元素以淡淡的进入视线的方式展示出来
示例:$(selector).fadeIn(speed, callback);

淡出动画效果

作用:让元素以渐渐消失的方式隐藏起来
示例:$(selector).fadeOut(1000);

淡入淡出切换动画效果

作用:通过改变透明度,切换匹配元素的显示或隐藏状态
示例:$(selector).fadeToggle('fast',function(){});

改变透明度到某个值

与淡入淡出的区别:淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明;而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的!
作用:调节匹配元素的不透明度
用法有别于其他动画效果
第一个参数表示:时长
第二个参数表示:不透明度值,取值范围:0-1
示例:$(selector).fadeTo(1000, .5); // 0全透,1全不透
第一个参数为0,此时作用相当于:.css(“opacity”, .5);
示例:$(selector).fadeTo(0, .5);

总结:

  • jQuery提供的这几个动画效果控制的CSS属性包括:高度、宽度、不透明度。{height:400px; width:300px; opacity:.4;}
  • 这三个CSS属性的共性是:属性值只有一个,并且这个值是数值(去掉单位后)。

自定义动画

注意:所有能够执行动画的属性必须只有一个数字类型的值。比如:要改变字体大小,要使用:fontSize(font-size),不要使用:font.

作用:执行一组CSS属性的自定义动画
第一个参数表示:要执行动画的CSS属性(必选)
第二个参数表示:执行动画时长(可选)
第三个参数表示:动画执行完后立即执行的回调函数(可选)
示例:$(selector).animate({params},speed,callback);

停止动画

方法:stop()
参数1:表示后续动画是否要执行,true:后续动画不执行 ;false:后续动画会执行。
参数2:数表示当前动画是否执行完,true:立即执行完成当前动画 ;false:立即停止当前动画。
示例:$(selector).stop(clearQueue,jumpToEnd);
都不给,默认false;

注意:

  • 当调用stop()方法后,队列里面的下一个动画将会立即开始。但是,如果参数clearQueue被设置为true,那么队列面剩余的动画就被删除了,并且永远也不会执行。
  • 如果参数jumpToEnd被设置为true,那么当前动画会停止,但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如:slideUp()方法,那么元素会立即隐藏掉。如果存在回调函数,那么回调函数也会立即执行。
  • 如果元素动画还没有执行完,此时调用sotp()方法,那么动画将会停止。并且动画没有执行完成,那么回调函数也不会被执行。
Last modification:June 3rd, 2018 at 06:08 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment