SOURCE

// 显示 / 隐藏 动画
$('.show').click(function () {
    $('.div1').show(300, function () {
        console.log('show done.')
    })
})
$('.hide').click(function () {
    $('.div1').hide(300, function () {
        console.log('hide done.')
    })
})
$('.toggle').click(function () {
    $('.div1').toggle(300, function () {
        console.log('hide done.')
    })
})

// 展开 / 收起 动画
$('.slideUp').click(function () {
    $('.div2').slideUp(300, function () {
        console.log('slideUp done.')
    })
})
$('.slideDown').click(function () {
    $('.div2').slideDown(300, function () {
        console.log('slideUp done.')
    })
})
$('.slideToggle').click(function () {
    $('.div2').slideToggle(300, function () {
        console.log('slideUp done.')
    })
})

// 淡入 / 淡出 动画
$('.fadeIn').click(function () {
    $('.div3').fadeIn(500, function () {
        console.log('slideUp done.')
    })
})
$('.fadeOut').click(function () {
    $('.div3').fadeOut(500, function () {
        console.log('slideUp done.')
    })
})
$('.fadeToggle').click(function () {
    $('.div3').fadeToggle(500, function () {
        console.log('slideUp done.')
    })
})
$('.fadeTo').click(function () {
    $('.div3').fadeTo(500, 0.2, function () {
        console.log('slideUp done.')
    })
})

// 自定义动画
$('.div4').animate({
    marginLeft: 600,
    width: 5
}, 2000, 'linear', function () {
    console.log('My Animation.')
})

// 累加动画
$('.add').click(function () {
    $('.div5').animate({
        marginLeft: "+=10"
    }, 200, 'linear', function () {
        console.log('My Animation.')
    })
})

//动画队列
$(".div6").slideDown(1000).slideUp(1000).show(1000).css("background", "yellow");

// 动画执行完再变色
// 1 使用回调
$(".div7").slideDown(1000,function () {
    $(".div7").slideUp(1000, function () {
        $(".div7").show(1000, function () {
            $(".div7").css("background", "yellow")
        });
    });
});
// 2 使用队列
$(".div8").slideDown(1000).slideUp(1000).show(1000).queue(function () {
    $(".div8").css("background", "hotpink")
});

// next 方法
$(".div9").slideDown(1000).slideUp(1000).show(1000).queue(function (next) {
    $(".div9").css("background", "yellow");
    next(); // 关键点
}).queue(function () {
    $(".div9").css("width", "500px")
});

// delay
$(".div10").animate({
    width: 500,
    height: 500
}, 1000).delay(2000).animate({
    height: 50
}, 1000);

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

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

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

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

<button class="show">show</button>
<button class="hide">hide</button>
<button class="toggle">toggle</button>
<div class="div1"></div>

<button class="slideUp">slideUp</button>
<button class="slideDown">slideDown</button>
<button class="slideToggle">slideToggle</button>
<div class="div2"></div>

<button class="fadeIn">fadeIn</button>
<button class="fadeOut">fadeOut</button>
<button class="fadeToggle">fadeToggle</button>
<button class="fadeTo">fadeTo</button>
<div class="div3"></div>

<div class="div4"></div>

<button class="add">add</button>
<div class="div5"></div>

<div class="div6"></div>

<div class="div7"></div>

<div class="div8"></div>

<div class="div9"></div>

<div class="div10"></div>

div {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
}