海阔天空

手机扫码查看

2020javaweb教程之jQuery效果

显示、隐藏、显示及隐藏

<div id="box">这是个内容</div>
<style>
    #box{width:500px;height:300px;border:1px solid red;}
</style>
<button id="btn1">3秒隐藏div</button>
<button id="btn2">5秒显示div</button>
<button id="btn3">5秒显示/隐藏div</button>
<script>
$(function(){
    $("#btn1").click(function () {
        $("#box").hide(3000);//3秒隐藏



    });
    $("#btn2").click(function () {
        $("#box").show(5000);//5秒显示
    });
    $("#btn3").click(function () {
        $("#box").toggle(5000);//5秒显示/隐藏
    });
})
</script>

淡入、淡出、透明度

$("#btn4").click(function () {
    $("#box").fadeOut(3000);//3秒淡出
});
$("#btn5").click(function () {
    $("#box").fadeIn(5000);//5秒淡入
});
$("#btn6").click(function () {
    $("#box").fadeToggle(5000);//5秒淡入淡出
});
$("#btn7").click(function () {
    $("#box").fadeTo(3000,0.5);//3秒透明度
});

收缩、展开

$("#btn8").click(function () {
    $("#box").slideUp(3000);//3秒收缩
});
$("#btn9").click(function () {
    $("#box").slideDown(5000);//5秒展开
});
$("#btn10").click(function () {
    $("#box").slideToggle(5000);//5秒展开/收缩
});

链式编程

$("#btn11").click(function () {
    $("#box").hide(3000)//3秒隐藏
        .show(5000)     //5秒显示
        .fadeOut(3000)  //3秒淡出
        .fadeIn(5000)   //5秒淡入
        .slideUp(3000)  //3秒收缩
        .slideDown(5000);//5秒展开
})