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

动画:

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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值