jQuery动画

hide和show

jQuery 中显示方法为：.show()，隐藏方法为：.hide()。
在无参数的时候，只是硬性的显示内容和隐藏内容

注意：.hide()方法其实就是在行内设置 CSS 代码：display:none; 而.show()方法要根据原来元素是区块还是内联来决定，如果是区块，则设置 CSS 代码：display:block; 如果是内联， 则设置 CSS 代码：display:inline;

$("div").click(function(){
    $(this).hide(1000).siblings().show(1000);
})
$("div").hide(2000,function(){
    // 当动画完成后触发这个函数
    console.log("aa");
}).show(1000);


// 这种方式会不断产生新函数会造成堆栈上线溢出
abc();
function abc(){
    $("div").hide(2000,function(){
        $("div").show(2000,abc);
    })
}
// 通过下面方法，让元素不停的隐藏和显示
abc();
function abc(){
    $("div").hide(2000).show(2000,abc);
}

toggle切换操作

$("div").click(function(){
    $(this).toggle(2000);
})

slideUp、slideDown、slideToggle

// slideUp 从下向上高度收缩
$("div").click(function(){
    $(this).slideUp(2000).slideDown(2000);
})

// slideDown 向下展开
$("div").slideUp(2000).slideDown(2000);

// 收缩和展开
$("div").click(function(){
    $(this).slideToggle(2000);
})

fadeIn、fadeOut完全透明和不透明，fadeToggle自动切换

// $("div").fadeTo(2000,0.3);// 透明到多少

// $("div").fadeOut(2000).fadeIn(2000);

// fadeToggle 自动切换
$("div").click(function(){
    $(this).fadeToggle(2000);
})

animate 自定义动画

div{
    width: 50px;
    height: 50px;
    background-color: red;
    border: 1px solid #000000;
    position: absolute;
}
<div>1</div>

// animate 自定义动画
$("div").animate({
    width:100,
    height:100
},2000).animate({
    left:1000
},2000).animate({
    top:500
},1000)

$("div").animate({
    width:100,
    height:100,
    left:1000,
    top:500
},1000,function(){
    // 当动画完成时执行函数
})