七、JQuery-4、DIV的动画、显示及隐藏

作者: cybeyond | 来源:发表于2018-06-05 17:51 被阅读0次

七、JQuery-4、DIV的动画、显示及隐藏
jQuery基础第二天(jQuery操作DOM)
《HTML控制DIV的显示与隐藏》
js 怎么监控一个普通DIV的宽高发生变化
angularjs学习
js
javascript设置DIV的显示与隐藏
angular实例之ng-show（纵向菜单的显示与隐藏）
jQuery总结笔记(二)
jquery 效果

1、animate动画

<html>
<head>
<style type="text/css">
#div1
{
    width:10px;
    height:10px;
    background-color:blue;
}
</style>
<script type="text/javascript" src="jslib/jquery-3.3.1.js"></script>
<script type="text/javascript">
//div动画
$(function(){
    $("#btn").click(function(){
    //$("#div1").animate({width:100,height:200},4000);
    $("#div1").animate({width:300},2000).animate({height:100},2000);//链式操作，先变化width，后变化height
    });
});

</script>
</head>
<body>
<input type="button" value="测试" id="btn">
<div id="div1"></div>
</body>
</html>

执行结果

2、slideUp、slideDown向上向下滑动

向上滑动

<html>
<head>
<style type="text/css">
#div1
{
    width:300px;
    height:300px;
    background-color:blue;
    clear:both;//清理浮动的元素
}
#btn,#info
{
    float:left;
    margin-bottom:20px;
}
#info
{
    margin-left:20px;
}
</style>
<script type="text/javascript" src="jslib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){

    $("#btn").click(function(){
        $("#div1").slideUp(8000,function(){
            alert("向上滑动结束");
        });
    });
});
</script>
</head>
<body>
<input type="button" value="切换" id="btn">
<div id="info">正在显示...</div>
<div id="div1"></div>
</body>
</html>

向下滑动

<html>
<head>
<style type="text/css">
#div1
{
    width:300px;
    height:300px;
    background-color:blue;
    clear:both;//清理浮动的元素
}
#btn,#info
{
    float:left;
    margin-bottom:20px;
}
#info
{
    margin-left:20px;
}
</style>
<script type="text/javascript" src="jslib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#div1").css("display","none"); //先将原有的div隐藏
    $("#btn").click(function(){
        $("#div1").slideDown(8000,function(){
            alert("向下滑动结束");
        });
    });
});
</script>
</head>
<body>
<input type="button" value="切换" id="btn">
<div id="info">正在显示...</div>
<div id="div1"></div>
</body>
</html>

3、slideToggle滑动实现对象的显示和隐藏

<html>
<head>
<style type="text/css">
#div1
{
    width:300px;
    height:300px;
    background-color:blue;
    clear:both;//清理浮动的元素
}
#btn,#info
{
    float:left;
    margin-bottom:20px;
}
#info
{
    margin-left:20px;
}
</style>
<script type="text/javascript" src="jslib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
    
    $("#btn").click(function(){
        $("#div1").slideToggle(8000);
        });
});
</script>
</head>
<body>
<input type="button" value="切换" id="btn">
<div id="info">......</div>
<div id="div1"></div>
</body>
</html>

4、fadeIn、fadeOut淡入和淡出

fadeTo切换到一个指定的透明度：0是彻底透明、1是不透明
淡出

<html>
<head>
<style type="text/css">
#div1
{
    width:300px;
    height:300px;
    background-color:blue;
    clear:both;//清理浮动的元素
}
#btn,#info
{
    float:left;
    margin-bottom:20px;
}
#info
{
    margin-left:20px;
}
</style>
<script type="text/javascript" src="jslib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#btn").click(function(){
        $("#div1").fadeOut(8000);
        });
});
</script>
</head>
<body>
<input type="button" value="切换" id="btn">
<div id="info">......</div>
<div id="div1"></div>
</body>
</html>

淡入

<html>
<head>
<style type="text/css">
#div1
{
    width:300px;
    height:300px;
    background-color:blue;
    clear:both;//清理浮动的元素
}
#btn,#info
{
    float:left;
    margin-bottom:20px;
}
#info
{
    margin-left:20px;
}
</style>
<script type="text/javascript" src="jslib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#div1").css("display","none");
    $("#btn").click(function(){
        $("#div1").fadeIn(8000);
        });
});
</script>
</head>
<body>
<input type="button" value="切换" id="btn">
<div id="info">......</div>
<div id="div1"></div>
</body>
</html>

5、使用show和hide进行显示和隐藏

<html>
<head>
<style type="text/css">
#div1
{
    width:300px;
    height:300px;
    background-color:blue;
    clear:both;//清理浮动的元素
}
#btn,#info
{
    float:left;
    margin-bottom:20px;
}
#info
{
    margin-left:20px;
}
</style>
<script type="text/javascript" src="jslib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#btn").click(function(){
        if($("#div1").css("display")=="none")
        {
            $("#info").html("正在显示");
            $("#div1").show(8000,function(){ // 回调函数，显示完后，通知显示完毕
                $("#info").html("显示完毕");
            });
        }
        else
        {
            $("#info").html("正在隐藏");
            $("#div1").hide(8000,function(){
                $("#info").html("隐藏完毕");
            });
        }
    });
});
</script>
</head>
<body>
<input type="button" value="切换" id="btn">
<div id="info">正在显示...</div>
<div id="div1"></div>
</body>
</html>

执行结果

6、使用toggle事件隐藏和显示

<html>
<head>
<style type="text/css">
#div1
{
    width:300px;
    height:300px;
    background-color:blue;
    clear:both;//清理浮动的元素
}
#btn,#info
{
    float:left;
    margin-bottom:20px;
}
#info
{
    margin-left:20px;
}
</style>
<script type="text/javascript" src="jslib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#btn").click(function(){
        var msg1,msg2;
        if($("#div1").css("display")=="none")
        {
            msg1="正在显示。。。";
            msg2="显示完毕！";
        }
        else
        {
            msg1="正在隐藏。。。";
            msg2="隐藏完毕！";
        }
        $("#info").html(msg1);
        $("#div1").toggle(8000,function(){
            $("#info").html(msg2);
        });
    });
});
</script>
</head>
<body>
<input type="button" value="切换" id="btn">
<div id="info">正在显示...</div>
<div id="div1"></div>
</body>
</html>