jQuery三组动画及自定义动画

jQuery动画:

  1. jQuery.show()和jQuery.hide()
    a.不传参数,没有动画效果,show():直接显示 hide():直接隐藏,比较常用
    b.show(speed)和hide(speed)
    speed:动画的持续时间 ,可以是毫秒值 ,还可以是固定字符串
    fast:200ms normal:400ms slow:600ms
    c.show([speed], [callback])和hide([speed],[ callback])
    [ ]中括号表示可选择参数,并非表示数组
    callback: 回调函数
  2. 滑入滑出动画
    jQuery.slideDown()滑入动画:从上往下显示
    jQuery.slideUp()滑出动画:从下往上隐藏
    jQuery.slideToggle()如果是滑入状态,就执行滑出的动画,如果是滑出状态,则不操作
    用法和jQuery.show()和jQuery.hide()用法一样,
    不同是如果不传speed参数,默认为normal
  3. 淡入淡出动画
    jQuery.fadeIn()淡入动画
    jQuery.fadeOut()淡出动画
    jQuery.fadeToggle()如果是淡入状态,就执行淡出动画,如果为淡出状态,则不操作
    用法和jQuery.show()和jQuery.hide()用法一样,
    不同是如果不传speed参数,默认为normal
  4. 自定义动画
    jQuery.animate(json,speed,easing, callback);

a.第一个参数 json:对象,里面可以传需要动画的样式
b. 第二个参数 speed:speed 动画的执行时间,有一个默认normal
c.第三个参数 easing:动画的执行效果
linear:线性 匀速 swing:秋千 摇摆 等
默认为swing
d.第四个参数 callback:回调函数

  1. 动画深入理解
    jQuery中对同一个对象作多组动画,jQuery会把它们储存在一个动画队列中
$("div").animate({left:800})
        .animate({top:400})
        .animate({width:300,height:300})
        .animate({top:0})
        .animate({left:0})
        .animate({width:100,height:100})
    }

jQuery.stop(clearQueue,jumpToEnd)用于停止动画
stop():停止当前正在执行的动画
clearQueue:是否清除动画队列,值为 true/false,默认为false
jumpToEnd:是否跳转到当前动画的最终效果 ,值为true/false,默认为false
通常用法:.stop().animate();

猜你喜欢

转载自blog.csdn.net/qq_39369835/article/details/87571597
今日推荐