jQuery 动画

jQuery 动画

• show
  显示隐藏的匹配元素

HTML：

<p style="display: none">Hello</p>

jQuery：

$("p").show(4000,function(){
  $(this).text("Animation Done...");
});

• hide
  隐藏显示的元素

HTML：

<p>Hello</p>

jQuery：

$("p").hide("fast",function(){
  alert("Animation Done.");
});

• toggle
  切换隐藏显示的元素

HTML：

<button id="btn">按钮</button>
<button id="stop">暂停</button>
<div class="block">
   国庆快乐！
</div>

jQuery：

$(function () {
       $("#btn").on("click", function () {
            $(".block").toggle(1000,function (){
            console.log("动画完成");
            });
       }
}

• slideDown
  通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数

HTML：

<button id="btn">按钮</button>
<button id="stop">暂停</button>
<div class="block">
   国庆快乐！
</div>

jQuery：

$(function () {
       $("#btn").on("click", function () {
            $(".block").slideDown(function (){
            console.log("动画完成");
            });
       }
}

• slideUp
  通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数

HTML：

<button id="btn">按钮</button>
<button id="stop">暂停</button>
<div class="block">
   国庆快乐！
</div>

jQuery：

$(function () {
       $("#btn").on("click", function () {
            $(".block").slideUp(function (){
            console.log("动画完成");
            });
       }
}

• slideToggle
  通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

HTML：

<button id="btn">按钮</button>
<button id="stop">暂停</button>
<div class="block">
   国庆快乐！
</div>

jQuery：

$(function () {
       $("#btn").on("click", function () {
            $(".block").slideToggle(function (){
            console.log("动画完成");
            });
       }
}

• fadeIn
  通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数

HTML：

<button id="btn">按钮</button>
<button id="stop">暂停</button>
<div class="block">
   国庆快乐！
</div>

jQuery：

$(function () {
       $("#btn").on("click", function () {
            $(".block").fadeIn(1000,0.5,function (){
            console.log("动画完成");
            });
       }
}

• fadeOut
  通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数

HTML：

<button id="btn">按钮</button>
<button id="stop">暂停</button>
<div class="block">
   国庆快乐！
</div>

jQuery：

$(function () {
       $("#btn").on("click", function () {
            $(".block").fadeOut(1000,0.5,function (){
            console.log("动画完成");
            });
       }
}

• fadeTo
  把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

HTML：

<button id="btn">按钮</button>
<button id="stop">暂停</button>
<div class="block">
   国庆快乐！
</div>

jQuery：

$(function () {
       $("#btn").on("click", function () {
            $(".block").fadeTo(1000,0.5,function (){
            console.log("动画完成");
            });
       }
}

- 自定义动画

HTML：

<button id="btn">按钮</button>
<button id="stop">暂停</button>
<div class="block">
   国庆快乐！
</div>

jQuery：

$(function () {
       $("#btn").on("click", function () {
            $(".block").animate({
               marginLeft: 800
           }, 1000, "linear").animate({
               marginTop: 200
           }, 1000, "linear").animate({
               marginLeft: 0
           }, 1000, "linear").animate({
               marginTop: 0
           }, 1000, "linear");
            });
       }
}

注释：
delay：延迟，延迟后边动画执行
stop：停止的是当前正在执行的动画
第一个参 是否清除队列 第二个参数 是否立即完成当前动画
finish：停止当前动画，立即完成动画的队列