Jquery--动画

最新推荐文章于 2018-01-12 10:02:21 发布

lq1224825

最新推荐文章于 2018-01-12 10:02:21 发布

阅读量419

点赞数

分类专栏： javascript jquery 动画文章标签： html 动画 jquery

本文链接：https://blog.csdn.net/l954758514/article/details/77460479

版权

javascript 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

动画

1 篇文章 0 订阅

订阅专栏

1、显示/隐藏
hide():隐藏
将高度、宽度、透明度变为0；display为“none”
show():显示
将高度、宽度、透明度变为初始的CSS设置的样式；display为“block”
toggle():切换
如果display为none的时候，点击一下就变成了block，反之变为none
代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title></title>
    <script src="../jquery-3.2.1.min.js"></script>
    <style>
        #div1{
            width: 1000px;
            height: 1000px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <button id="btnhide">隐藏</button>
    <button id="btnshow">出现</button>
    <button id="btntoggle">切换</button>
</body>
<script>
    $("#btnhide").click(function(){
        $("#div1").hide(1);
    });
    $("#btnshow").click(function(){
        $("#div1").show(3000);
    });
    $("#btntoggle").click(function(){
        $("#div1").toggle(9999);
    });
</script>
</html>

2、淡入/淡出
fadeIn():淡入
将隐藏的样式通过改变其透明度（透明度从0-1），让它显示

fadeOut():淡出
将显示的样式通过改变其透明度（透明度从1-0），让它隐藏起来

fadeToggle():淡入淡出的切换
如果样式隐藏，则将它显示出来
如果样式显示，则将它隐藏起来

fadeTo():固定其透明度（透明度在0-1之间）

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title></title>
    <script src="../jquery-3.2.1.min.js"></script>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <button id="btnfadein">淡出</button>
    <button id="btnfadeout">淡入</button>
    <button id="btnfadetoggle">切换</button>
    <button id="btnfadeto">固定</button>
</body>
<script>
    $("#btnfadein").click(function () {
        $("#div1").fadeIn("10000");
    });
    $("#btnfadeout").click(function(){
        $("#div1").fadeOut("10000");
    });
    $("#btnfadetoggle").click(function () {
        $("#div1").fadeToggle();
    });
    $("#btnfadeto").click(function () {
        $("#div1").fadeTo("slow",0.5);
    })
</script>
</html>

3、上滑/下滑
slideup():上滑
将设置的高度从初始变为0，然后隐藏它
slidedown()：下滑
将设置的高度从0变为初始
slideToggle():下滑和上滑的切换
如果元素是隐藏的，则先显示，后把它的高度增加
如果元素是显示的，现将高度减为0，再隐藏它。

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title></title>
    <script src="../jquery-3.2.1.min.js"></script>
    <style>
        #div1{
            width: 1000px;
            height: 1000px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <button id="btnSlideup">上滑</button>
    <button id="btnSlideDown">下滑</button>
    <button id="btnSlideToggle">切换</button>
</body>
<script>
    $("#btnSlideup").click(function () {
        $("#div1").slideUp(5000/*function () {
            alert("上滑了");
        }*/);
    });
    $("#btnSlideDown").click(function () {
        $("#div1").slideDown(5000);
    });
    $("#btnSlideToggle").click(function () {
        $("#div1").slideToggle(5000);
    })
</script>
</html>

4、动画

$("#btn").click(function () {
    //设置多个CSS属性
  /*  $("#div1").animate({left:'200px',top:'300'});*/
    //设置相关属性
    $("#div1").animate({
        left:'300px',
        width: '+=100px',
        height: '+=100px',
        opacity: '0.5'
    })
});

改变预定义值来实现我们所需要的内容的显示或隐藏

$("#div1").animate({
  width: 'toggle'
})

<body>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <div style="width: 200px;height: 200px;background-color: blue"></div>
</body>
<script>
    $("#start").click(function () {
        $("div").animate({height:'500px'},"slow")
        $("div").animate({width:'500px'},"slow")
        $("div").animate({height:'200px'},"slow")
        $("div").animate({width:'200px'},"slow")
    })
    $("#stop").click(function () {
       $("div").stop(true);
    })
</script>

.animate()中有三个参数：
第一个参数是需要改变的样式
第二个参数是显示的速度（slow，fast，毫秒数）
第三个参数是回调函数

5、结束动画
动画在进行的过程中是可以停止的

<body>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <div style="width: 200px;height: 200px;background-color: blue"></div>
</body>
<script>
    $("#start").click(function () {
        $("div").animate({height:'500px'},"slow")
        $("div").animate({width:'500px'},"slow")
        $("div").animate({height:'200px'},"slow")
        $("div").animate({width:'200px'},"slow")
    })
    $("#stop").click(function () {
       $("div").stop();
    })
</script>

lq1224825

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery--动画

1、显示/隐藏 hide():隐藏将高度、宽度、透明度变为0；display为“none” show():显示将高度、宽度、透明度变为初始的CSS设置的样式；display为“block” toggle():切换如果display为none的时候，点击一下就变成了block，反之变为none 代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4
复制链接

扫一扫

专栏目录