美文网首页
jQuery动画

jQuery动画

作者: 董二干先生 | 来源:发表于2019-09-29 13:04 被阅读0次

hide([duration ] [,easing ] [,complete ])

用于隐藏元素,没有参数的时候等同于直接设置display属性
参数

  • duration时间
    动画执行的时间,持续时间是以毫秒为单位的;值越大表示动画执行的越慢,不是越快。还可以提供'fast' 和 'slow'字符串,分别表示持续时间为200 和 600毫秒。

  • easing动画运动的算法
    jQuery库中默认调用 swing。如果需要其他的动画算法,请查找相关的插件

  • complete回调
    动画完成时执行的函数,这个可以保证当前动画确定完成后发会触发

$('.target').hide();

等同于 $('.target').css('display', 'none')

.show( [duration ] [, easing ] [, complete ] )

用于显示元素,用法和hide类似

toggle( [duration ] [, easing ] [, complete ] )

用来切换元素的隐藏、显示,类似于toggleClass,用法和show、hide类似

渐变

.fadeIn( [duration ] [, easing ] [, complete ] )

通过淡入的方式显示匹配元素,参数含义和上面相同

$('#book').fadeIn('slow', function() {
});

.fadeOut( [duration ] [, easing ] [, complete ] )

通过淡出的方式隐藏匹配元素

$('#book').fadeOut('slow', function() {

});

.fadeTo( duration, opacity [, easing ] [, complete ] )

调整匹配元素的透明度,方法通过匹配元素的不透明度做动画效果

$('#book').fadeTo('slow', 0.5, function() {

});

.fadeToggle( [duration ] [, easing ] [, complete ] )

通过匹配的元素的不透明度动画,来显示或隐藏它们,方法执行匹配元素的不透明度动画。当被可见元素调用时,元素不透明度一旦达到0,display样式属性设置为none ,所以元素不再影响页面的布局。

滑动

.slideDown( [duration ] [, easing ] [, complete ] )

用滑动动画显示一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式

$('#book').slideDown('slow', function() {
    
});

.slideUp( [duration ] [, easing ] [, complete ] )

用滑动动画隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑上去,当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。 display 样式属性将被设置为none,以确保该元素不再影响页面布局。

$('#book').slideUp('slow', function() {
  
});

.slideToggle( [duration ] [, easing ] [, complete ] )

用滑动动画显示或隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面中,在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中,所以display可以方便以后可以恢复到其初始值。

如果一个元素的display属性值为inline,然后是隐藏和显示,这个元素将再次显示inline。当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。

$('#clickme').click(function() {
 $('#book').slideToggle('slow', function() {

 });
});

自定义动画

.animate( properties [, duration ] [, easing ] [, complete ] )

properties是一个CSS属性和值的对象,动画将根据这组对象移动。

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
   
  });
});

.clearQueue

清除动画队列中未执行的动画

.finish

停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态

stop( [clearQueue ] [, jumpToEnd ] )

停止当前正在运行的动画
.stop(true); 停止所有动画。
.stop(true,true);立即完成当前动画后停止所有动画,该元素上的 CSS 属性会被立刻修改成当前动画的目标值

相关文章

  • jquery动画和循环

    jquery特殊效果 jquery动画 jquery循环

  • jQuery特殊效果

    jQuery特殊效果 jQuery动画

  • jQuery 效果

    目录 jQuery 隐藏/显示jQuery 淡入淡出jQuery 滑动jQuery 动画jQuery Callba...

  • JQuery动画,事件

    jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法...

  • jQuery动画、循环

    1、jQuery特殊效果 2、jQuery动画 3、jQuery循环

  • JS-17day

    1、jQuery特殊效果 2、jQuery动画 3、jQuery循环

  • JQuery:动画

    jquery动画:

  • jQuery动画

    jQuery动画

  • jQuery动画队列

    jQuery 动画队列 当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就...

  • jquery实战

    jQuery属性操作 jQuery特殊效果 jQuery动画 jQuery循环 jQuery其他事件 自定义事件

网友评论

      本文标题:jQuery动画

      本文链接:https://www.haomeiwen.com/subject/bbnnyctx.html