基础动画 .hide() .show() .stop() 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 {
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
        <script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">

        $(function() {

让标签缩小，直到消失 hide();

            $('button').click(function() {

改变:高度、宽度 、opacity当宽 高、透明度 为 0 标签属性 display = none

//hide的参数可以为毫秒为单位的 数值类型也可以是("slow","normal", or "fast");

                /*$('div').hide(1000);      隐藏
                //让标签显示 
                $('div').show(1000);*/      显示

                if($('#div1').css('display') == 'none') {

//让动画停止执行 .stop()

                    //$('#div1').stop(清空队列,直接到达动画最终状态);
                    //$('#div1').stop();
                    $('#div1').show(1000);
                } else {
                    //$('#div1').stop();
                    $('#div1').hide(1000);
                }
            })

        })
    </script>
</head>

<body>
    <button>点击产生动画</button>
    <div id="div1">就撒旦撒旦卡</div>
</body>

</html>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • jquery 动画特效
    隐藏元素的hide方法 让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css...
    老夫撩发少年狂阅读 1,104评论 0赞 2
  • 基础
    jQuery 安装 把 jQuery 添加到您的网页 如需使用 jQuery，您需要下载 jQuery 库（会在下...
    Clover园阅读 301评论 0赞 0
  • jQuery基础(3)
    (续jQuery基础(2)) 四、动画篇 第1章 动画基础隐藏和显示 （1）隐藏元素的hide方法 让页面上的元素...
    凛0_0阅读 462评论 0赞 6
  • 父亲
    从来不需要想起 永远也不会忘记 你的慈祥 深深印在我的脑海 在我十六岁时你走了 带着不舍久久不愿闭上双眼 望着你弥...
    田萍阅读 344评论 5赞 6
  • 分析、总结与表达能力的欠缺
    今晚看了几篇曹政的微信公众号的文章，发现写的太厉害，对一些事与理讲的十分透彻，总结得相当精辟。文中不少的例子与经历...
    杨梅泡酒阅读 878评论 0赞 0