jquery的特殊效果

1.jquery特殊效果–淡入淡出

方法列表

方法	描述
fadeIn()	用于显示所有匹配的元素，并带有淡入的过渡动画效果
fadeOut()	用于隐藏所有匹配的元素，并带有淡出的过渡动画效果
fadeToggle()	用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果

1.1fadeIn()：用于显示所有匹配的元素，并带有淡入的过渡动画效果，如果元素本身可见，则没有变化。如果元素本身隐藏，则使其可见。

语法：.fadeIn( [ duration ] ，[ easing ] ，[ complete ] )

参数说明：

参数	描述
duration	指定过渡动画运行时间(毫秒数)，默认值为400
easing	指定使用何种动画效果，默认为”swing”，还可以设为”linear”或其他自定义的动画样式的函数名称
complete	元素显示完毕后需要执行的函数

1.2fadeOut()：用于隐藏所有匹配的元素，并带有淡出的过渡动画效果，如果元素本身是隐藏的，则不对其作任何改变。如果元素是可见的，则将其隐藏。

fadeOut()的语法与参数与fadeIn()相同，具体可参照fadeIn()。

举例：通过按钮控制盒子的淡入与淡出
1.在body中创建我们需要的按钮和盒子元素

<button id="bt">淡入淡出按钮</button>
<div id="box"></div>

2.设置盒子样式

#box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 10px 0;
    display: none;
}

3.搭建环境

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

4.编写相关函数

//入口函数
        $(function(){
            //盒子淡入淡出
            var bt=$("#bt");
            var box=$("#box");
            bt.click(function(){
                if(box.css("display") == "none"){
                   box.fadeIn(1000);
                }else{
                   box.fadeOut(1000);
                } 
            })
        })

1.3fadeToggle():用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果。如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)

fadeToggle()的语法与参数与fadeIn()相同，具体可参照fadeIn()。

在上述例子中，我们可以使用fadeToggle()替换fadeIn()和fadeOut()，也可以达到同样的效果。

bt.click(function(){
      box.fadeToggle(1000);
})

2.jquery特殊效果–可见与隐藏

方法列表

方法	描述
hide()	用于显示所有匹配的元素，并带有过渡动画效果
show()	用于隐藏所有匹配的元素，并带有过渡动画效果
toggle()	用于切换所有匹配的元素，并带有过渡动画效果

2.1 hide()：用于隐藏所有匹配的元素，如果元素本身是隐藏的，则不对其作任何改变。如果元素是可见的，则将其隐藏。
语法：.hide( [ speed] ，[ callback ] )

参数说明：

参数	描述
speed	参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒
callback	参数是隐藏或显示完成后所执行的函数名称。

2.2 show()：用于显示所有匹配的元素，如果元素本身可见，则没有变化。如果元素本身隐藏，则使其可见。

show()的语法与参数与hide()相同，具体可参照hide()。

举例：通过按钮控制盒子的显示与隐藏
1.在body中创建我们需要的按钮和盒子元素

<button id="bt">显示与隐藏按钮</button>
<div id="box"></div>

2.设置盒子样式

#box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 10px 0;
    display: none;
}

3.搭建环境

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

4.编写相关函数

//入口函数
        $(function(){
            //盒子的显示与隐藏
            var bt=$("#bt");
            var box=$("#box");
            bt.click(function(){
                if(box.css("display") == "none"){
                   box.show(1000);
                }else{
                   box.hide(1000);
                } 
            })
        })

toggle():用于切换所有匹配的元素，如果元素当前是可见的，则将其隐藏；如果元素当前是隐藏的，则使其显示

toggle()的语法与参数与hide()相同，具体可参照hide()。

在上述例子中，我们可以使用toggle()替换hide()和show()，也可以达到同样的效果。

bt.click(function(){
      box.toggle(1000);
})

3.jquery特殊效果–展开与卷起

方法列表

方法	描述
slideDown()	用于展开所有匹配的元素，并带有过渡动画效果
slideUp()	用于卷起所有匹配的元素，并带有过渡动画效果
slideToggle()	用于切换所有匹配的元素，并带有过渡动画效果

3.1 slideUp()：用于卷起所有匹配的元素，如果元素本身是隐藏的，则不对其作任何改变。如果元素是可见的，则将其隐藏。
语法：.slideUp( [ speed] ，[ callback ] )

参数说明：

参数	描述
speed	参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒
callback	参数是隐藏或显示完成后所执行的函数名称。

3.2 slideDown()：用于展开所有匹配的元素，如果元素本身可见，则没有变化。如果元素本身隐藏，则使其可见。

slideDown()的语法与参数与slideUp()相同，具体可参照slideUp()。

举例：通过按钮控制盒子的显示与隐藏
1.在body中创建我们需要的按钮和盒子元素

<button id="bt">卷起与展开按钮</button>
<div id="box"></div>

2.设置盒子样式

#box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 10px 0;
    display: none;
}

3.搭建环境

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

4.编写相关函数

//入口函数
        $(function(){
            //盒子的卷起与展开
            var bt=$("#bt");
            var box=$("#box");
            bt.click(function(){
                if(box.css("display") == "none"){
                   box.slideDown(1000);
                }else{
                   box.slideUp(1000);
                } 
            })
        })

slideToggle():用于切换所有匹配的元素，如果元素当前是可见的，则将其隐藏；如果元素当前是隐藏的，则使其显示

slideToggle()的语法与参数与slideUp()相同，具体可参照slideUp()。

在上述例子中，我们可以使用slideToggle()替换slideUp()和slideDown()，也可以达到同样的效果。

bt.click(function(){
      box.slideToggle(1000);
})