jquery 隐藏的动画效果 jquery显示与隐藏动画

1. hide() / show()

hide()：隐藏
show()：显示
原本的图案：

.box {
    width: 100px;
    height: 100px;
    background-color: pink;
    color: #fff;
    line-height: 100px;
    text-align: center;
}

<button>btn</button>
<div class="box">box</div>

效果：

给按钮添加事件，点击时隐藏box：

$('button').click(function(){
    $('.box').hide();
})

效果：

把box的初始状态设成none，给box添加点击事件，点击时显示：

$('button').click(function(){
    $('.box').show();
})

2. slideDown() / slideUp() / slideToggle()

slideDown()：滑动向下显示
slideUp()：滑动向上隐藏
slideToggle()：通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

1.给按钮绑定点击事件，点击时，box从上到下，滑动显示出来：

$('button').click(function(){
    $('.box').slideDown();
})

效果：

2.给按钮绑定点击事件，点击时，box从下到上，滑动隐藏：

此时初始状态是box显示，display: block;

$('button').click(function(){
    $('.box').slideUp();;
})

效果：

3.给按钮绑定点击事件，点击前，如果box显示，点击后box以slideUp的方式隐藏；点击前如果box隐藏，点击后box以slideDown方式显示：

$('button').click(function(){
    $('.box').slideToggle();
})

效果：

4. 还可以向slideToggle()传递参数：时间和函数，分别代表执行事件的时间和执行结束后要做的事情

4.1 设置执行时间

上面的动图是用了默认的执行时间

现在我设置执行时间为3s（3000ms）：

$('.box').slideToggle(3000);

效果：可以明显感觉到速度变慢了

hide()和show()不具备指定执行时间的功能，两者都是瞬间完成的

4.2 设置动画完毕后进行的操作

$('button').click(function(){
    $('.box').slideToggle(3000,function(){
        console.log('end');//动画执行结束后在控制台打印'end'
    });
})

3. fadeIn() / fadeOut() / fadeToggle() /fadeTo()

改变透明度
fadeIn()：方法逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()：逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）
fadeToggle()：结合前两者的效果，标签若是隐藏，触发该事件后，先将该事件设置为显示;，再将其透明度从0到1改变；如果标签显示，触发该事件，先将该事件的透明度从1到0变化，然后再display: none掉

$('button').click(function(){
    $('.box').fadeToggle(3000,function(){
        console.log('end')
    });
})

效果：