首页 > Web开发 > 详细

208 jQuery 效果 之 显示隐藏

时间:2020-01-16 21:50:17      阅读:70      评论:0      收藏:0      [点我收藏+]

jQuery 给我们封装了很多动画效果,最为常见的如下:

  • 显示隐藏:show() / hide() / toggle() ;
  • 划入画出:slideDown() / slideUp() / slideToggle() ;
  • 淡入淡出:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
  • 自定义动画:animate() ;

注意:

动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

jQuery为我们提供另一个方法,可以停止动画排队:stop() ;

1.5.1 显示隐藏

? 显示隐藏动画,常见有三个方法:show() / hide() / toggle() ;

? 语法规范如下:

技术分享图片

技术分享图片

代码演示

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
              $("div").toggle(1000);
            })
            // 一般情况下,我们都不加参数直接显示隐藏就可以了
        });
    </script>
</body>

208 jQuery 效果 之 显示隐藏

原文:https://www.cnblogs.com/jianjie/p/12203120.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!