jQuery-动效

jQuery显示与隐藏

• show([speed,[easing],[fn]])
  • 显示隐藏的匹配元素
  • 内部的实现原理是根据当前操作的元素是块级还是行内决定的
  • 块级内部调用display:block;,行内内部调用display:inline
  • 参数
    • speed 字串符速度slow,normal,fast或表示动画时长的毫秒数值
    • easing用来指定切换效果，默认是swing，可用参数linear
    • fn 在动画完成时执行的回调函数，每个元素执行一次

<script>
  $("button").eq(0).click(function () {
    $("div").show(1000, function () {
        alert("animation over");
    });
  });
</script>

• hide([speed,[easing],[fn]])
  • 隐藏显示的元素
  • 参数
    • speed 字串符速度slow,normal,fast或表示动画时长的毫秒数值
    • easing用来指定切换效果，默认是swing，可用参数linear
    • fn 在动画完成时执行的回调函数，每个元素执行一次

<script>
$("button").eq(0).click(function () {
    $("div").hide(1000, function () {
        alert("show over");
    });
});
</script>

• toggle([speed],[easing],[fn])
  • 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
  • 参数
    • speed 字串符速度slow,normal,fast或表示动画时长的毫秒数值
    • easing用来指定切换效果，默认是swing，可用参数linear
    • fn 在动画完成时执行的回调函数，每个元素执行一次

<script>
$("button").eq(2).click(function () {
    $("div").toggle(1000, function () {
        alert("Switch over");
    });
});
</script>

jQuery滑动效果

• slideDown([speed],[easing],[fn])
  • 通过高度变化（向下增大）来动态地显示所有匹配的元素
  • 参数与显示隐藏函数参数一样

<script>
$("button").eq(0).click(function () {
    $("div").slideDown(1000, function () {
        alert("SlideDown");
    });
});
</script>

• slideUp([speed,[easing],[fn]])
  • 通过高度变化（向下增大）来动态地隐藏所有匹配的元素
  • 参数与显示隐藏函数参数一样

<script>
$("button").eq(1).click(function () {
    $("div").slideUp(1000, function () {
        alert("SlideUp");
    });
});
</script>

• slideToggle([speed],[easing],[fn])
  • 通过高度变化来切换所有匹配元素的可见性
  • 参数与显示隐藏函数参数一样

<script>
$("button").eq(2).click(function () {
    $("div").slideToggle(1000, function () {
        alert("SlideToggle");
    });
});
</script>

jQuery淡入淡出

参数、注意事项和显示隐藏动画一模一样, 只不过动画效果不一样而已

• fadeIn([speed],[easing],[fn])
  • 淡入动画

<script>
$("button").eq(0).click(function () {
    $("div").fadeIn(1000, function () {
        alert("Over");
    });
});
</script>

• fadeOut([speed],[easing],[fn])
  • 淡出动画

<script>
$("button").eq(1).click(function () {
    $("div").fadeOut(1000, function () {
        alert("Over");
    });
});
</script>

• fadeToggle([speed,[easing],[fn]])
  • 切换动画(显示变淡出,不显示变淡入)

<script>
$("button").eq(2).click(function () {
    $("div").fadeToggle(1000, function () {
        alert("Over");
    });
});
</script>

• fadeTo([[speed],opacity,[easing],[fn]])
  • 淡入到指定透明度动画
  • 通过第二个参数,淡入到指定的透明度(取值范围0~1)

<script>
$("button").eq(3).click(function () {
    $("div").fadeTo(1000, 0.2, function () {
        alert("Over");
    })
});
</script>

jQuery自定义动画

• animate(params,[speed],[easing],[fn])
  • 用于创建自定义动画的函数
  • 参数
    • 第一个参数: 接收一个对象, 可以在对象中修改属性
    • 第二个参数: 指定动画时长
    • 第三个参数: 指定动画节奏, 默认就是swing
    • 第四个参数: 动画执行完毕之后的回调函数

<script>
  // 修改属性
  $("button").eq(0).click(function (){
    $(".box1").animate({
        width: 500
        }, 2000, "linear", function () {
        alert("Over");
    });
  });

  // 同时修改多个属性
  // 多个属性动画会同时执行
  $("button").eq(1).click(function (){
    $(".box2").animate({
        width: 200,
        marginLeft:200
        }, 2000, "linear", function () {
        alert("Over");
    });
  });

 // 每次开始运动都必须是初始位置或者初始状态
 // 如果想在上一次位置或者状态下再次进行动画可以使用累加动画
  $("button").eq(2).click(function (){
    $(".box3").animate({
        width: "+=100"
        }, 2000, "linear", function () {
        alert("Over");
    });
   });

  // 初次之外，还可以使用显示隐藏等函数的关键字
  $("button").eq(3).click(function (){
    $(".box4").animate({
        width: "hide"
        // width: "toggle"
        }, 2000, "linear", function () {
        alert("Over");
    });
   });
</script>

• delay(duration,[queueName])
  • 设置一个延时来推迟执行队列中之后的项目

<script>
  // 表示width执行完后过2s在执行高度动画
  $(".box").animate({
      width: 500
    }, 1000).delay(2000).animate({
      height: 500
    }, 1000);
</script>

• stop([clearQueue],[jumpToEnd])
  • 停止所有在指定元素上正在运行的动画

<script>
 $("button").eq(1).click(function () {
    // 立即停止当前动画, 继续执行后续的动画
    // $("div").stop();
    // $("div").stop(false);
    // $("div").stop(false, false);

    // 立即停止当前和后续所有的动画
    // $("div").stop(true);
    // $("div").stop(true, false);

    // 立即完成当前的, 继续执行后续动画
    // $("div").stop(false, true);

    // 立即完成当前的, 并且停止后续所有的
    $("div").stop(true, true);
 });
</script>

• finish( [queue ] )
  • 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
  • 当.finish()在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（所有动画的目标值）。所有排队的动画将被删除

<script>
  $("button").eq(0).click(function () {
      $(".one").animate({
      height: 500
      }, 2000);

      $(".one").animate({
      width: 500
      }, 1000);
  });

  // 停止所有动画,并将CSS设置为其最终值
  $("button").eq(1).click(function () {
        $(".one").finish();
  });
</script>

jQuery动画设置

<script>
 // 关闭页面上所有的动画
 jQuery.fx.off = true;

 // 设置动画的显示帧速(ms)
 jQuery.fx.interval = 100;
</script>