jQuery动画效果

显示隐藏

无参时执行的效果不具有动画效果

  1. show([speed],[callback]) - 显示

    1. speed:动画执行的时间,有三个预定义值(slow | normal | fast)

    2. callback:动画执行完成后执行的函数

      1
      2
      3
      $("div").show(500,function(){
      alert('xxx');
      });
  2. hide([speed],[callback]) - 隐藏

  3. toggle([speed],[callback]) - 显示和隐藏之间互相切换

滑动效果

底层具有默认时长,无参时执行的效果依然具有动画效果

  1. slideUp([speed],[callback]) - 向上滑动
  2. slideDown([speed],[callback]) - 向下滑动
  3. slideToggle([speed],[callback]) - 向上与向下滑动之间互相切换

淡入淡出

底层具有默认时长,无参时执行的效果依然具有动画效果

  1. fadeIn([speed],[callback]) - 淡入
  2. fadeOut([speed],[callback]) - 淡出
  3. fadeToggle([speed],[callback]) - 淡入与淡出之间互相切换
  4. fadeTo(speed,opacity) - 将当前元素从透明度一个值到另一个值
    1. speed:动画执行的时间,有三个预定义值(slow | normal | fast)
    2. opacity:动画结束后的透明度,值在0-1之间

自定义动画

animate(params,[speed],[callback]) 方法允许创建自定义的动画

  • params:定义形成动画的 CSS 属性(可有多个属性)

  • speed:动画执行的时间,有三个预定义值(slow | normal | fast)

  • callback:动画执行完成后执行的函数

    1
    2
    3
    4
    5
    6
    7
    $("button").click(function() {
    $("div").animate({
    width: 500,
    height: 600,
    opacity: 0.4
    }, 500);
    })
更新于

请我喝[茶]~( ̄▽ ̄)~*

boW 微信支付

微信支付

boW 支付宝

支付宝

boW 贝宝

贝宝