JavaScript-Jquery学习笔记------《3》

最新推荐文章于 2024-04-29 22:37:55 发布

CYD、孤狼

最新推荐文章于 2024-04-29 22:37:55 发布

阅读量136

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/cyd_csdn/article/details/88715462

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

动画：

show（时间，fn）：显示,在效果完成之后，会执行fn；

hide时间（时间,fn）：隐藏，在程序执行完成之后，会执行fn；

toggle：切换

<head>
<style type="text/css">
    div{
        width:100px;
        height:100px;
        background:red;
    }
</style>
</head>
<body>
<div></div>
<input type="button" value="show" id="d1">
<input type="button" value="hide" id="d2">
<input type="button" value="toggle" id="d3">
<script type="text/javascript">
    $("#d1").click(function(){
        $("div").show();
    });
    $("#d2").click(function(){
        $("div").hide();
    });
    $("#d3").click(function(){
        $("div").toggle();
    });
</script>
</body>

滑动：

slideDown(时间，fn)：下拉；

slideUp(时间，fn)：收起；

slideToggle(时间，fn)：切换效果；

<body>
<div></div>
//slideDone:下滑，显示
//slideUp：收起
//slideToggle：切换
<input type="button" value="slideDown" id="d1">
<input type="button" value="slideUp" id="d2">
<input type="button" value="slideToggle" id="d3">
<script type="text/javascript">
    $("#d1").click(function(){
        $("div").slideDown();
    });
    $("#d2").click(function(){
        $("div").slideUp();
    });
    $("#d3").click(function(){
        $("div").slideToggle();
    });
</script>
</body>

淡入淡出：

fadeln:淡入；

fadeOut：淡出；

fadeToggle：切换；

fadeTo(3000,(0-1),fn):淡入淡出效果/程度；

<body>
<div></div>
//slideDone:下滑，显示
//slideUp：收起
//slideToggle：切换
<input type="button" value="fadeIn" id="d1">
<input type="button" value="fadeOut" id="d2">
<input type="button" value="fadeToggle" id="d3">
<input type="button" value="fadeTo" id="d4">
<script type="text/javascript">
    $("#d1").click(function(){
        $("div").fadeIn();
    });
    $("#d2").click(function(){
        $("div").fadeOut();
    });
    $("#d3").click(function(){
        $("div").fadeToggle();
    });
    $("#d4").click(function(){
        $("div").fadeTo();
    });
</script>
</body>