JQuery(29)——动画

最新推荐文章于 2023-08-10 16:36:12 发布

陆老师Peter

最新推荐文章于 2023-08-10 16:36:12 发布

阅读量98

点赞数

分类专栏： JQuery 文章标签： show() hide() toggle() 内置 slideDown

本文链接：https://blog.csdn.net/qq_34573534/article/details/102470228

版权

JQuery 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

1、show()、hide()方法会显示、隐藏元素。用toggle()方法在显示、隐藏之间切换：

$(":button[value=show]").click(function() { $("div").show(); });

$(":button[value=hide]").click(function() { $("div").hide(); });

<div>哈哈哈哈哈哈哈哈哈哈哈<br />哈哈哈哈哈哈哈哈哈哈哈<br />哈哈哈哈哈哈哈哈哈哈哈<br /></div>
<input type="button" value="show" />
<input type="button" value="hide" />
<script type="text/javascript">
    $(":button[value=show]").click(function() { $("div").show("slow"); });
    $(":button[value=hide]").click(function() { $("div").hide("slow"); });
</script>

如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒。也可以使用三个内置的速度：fast（200毫秒）、normal（400毫秒）、slow（600毫秒），jQuery动画函数中需要速度的地方一般也可以使用这个三个值。toggle、slideDown、slideUp。

2、案例：QQTab效果。常见错误：animate参数是词典类型。隐藏和显示的级别不一样。mouseover（进入图片的时候触发一次）和mousemove（鼠标在元素上移动就会一直不断的触发）的区别。mousemove中放大造成的“没效果”的迷局。“没效果”不等于“没执行”。如何证明“这段代码运行了吗”alert。样式优先级。

案例：QQTab效果：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    
    <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#qq li:odd").addClass("body");
            $("#qq li:even").addClass("header").click(function() {
                $(this).next("li.body").show("fast").siblings("li.body").hide("fast");
            });
            $("#qq li:first").click();//模拟点击第一个元素
        });
    </script>
    <style type="text/css">
        ul{list-style-type:none;}
        .header{background-color:Red;cursor:pointer;}
        .body{border-color:Blue;border-style:solid;border-width:1px;}
    </style>
</head>
<body>
<ul id="qq">
    <li>我的好友</li>
    <li>张三<br />李四<br /></li>
    <li>我的同学</li>
    <li>拉登<br />小泉<br /></li>
    <li>陌生人</li>
    <li>张宇<br />苏打绿<br /></li>
</ul>
</body>
</html>

3、课下练习：tabControl、焦点图。

TabContro效果：

    <style type="text/css">
        #tabCtrl ul
        {
            list-style-type: none;
        }
        #tabCtrl ul li
        {
            float: left;
            margin: 0 10px;
            cursor: pointer;
        }
        .activeTab
        {
            background-color: Red;
        }
    </style>
    <div id="tabCtrl">
        <ul>
            <li class="activeTab">常规</li>
            <li>高级</li>
            <li>设置</li>
        </ul>
        <br />
        <div id="tabPage">
            <div>
                这里是常规设置</div>
            <div style="display: none">
                这里是高级设置</div>
            <div style="display: none">
                这里是设置设置</div>
        </div>
    </div>

    <script type="text/javascript">
        $("#tabCtrl li").click(function() {
            $(this).addClass("activeTab");
            $(this).siblings().removeClass("activeTab");
            var index = $("#tabCtrl li").index($(this));
            var div = $("#tabPage div").eq(index);
            div.show();
            div.siblings().hide();
        });
    </script>

tabControl目标：

<div>
    <div>
       <span>常规</span>
       <div>
           <input type="check" />adsfasfdasdfasfdsaf
       </div>
    </div>
    <div>
       <span>高级</span>
       <div>
           <input type="text" />adsfasfdasdfasfdsaf
       </div>
    </div>
</div>

陆老师Peter

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery(29)——动画

1、show()、hide()方法会显示、隐藏元素。用toggle()方法在显示、隐藏之间切换：$(":button[value=show]").click(function() { $("div").show(); });$(":button[value=hide]").click(function() { $("div").hide(); });<div>哈哈哈哈哈哈...
复制链接

扫一扫

专栏目录