袁磊老师的课，小方的jQuery笔记（四），老周在边上陪着，真好！

最新推荐文章于 2019-05-14 16:58:56 发布

赵俸堃是我的名字

最新推荐文章于 2019-05-14 16:58:56 发布

阅读量222

点赞数

分类专栏：袁磊老师的课前端基础 jQuery 文章标签：课堂笔记前端 jQuery

本文链接：https://blog.csdn.net/qq_43511842/article/details/88423992

版权

前端基础同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

袁磊老师的课

19 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

jQuery动画

一、各种动画
slideDown()
slideUp()
fadeOut() 渐渐消失
fageIn() 渐渐出现
toggle() 已经被废除了
slideToggle()
fadeTo()
animate()

二、下拉菜单

概要：
一定是父对象：相对定位 ------position：relative
下拉菜单：绝对定位 -------position：absolute
事件添加在父元素上
2.代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>下拉菜单</title>
    <style>
        h4{padding: 0; margin: 0;}
        .menu{
            width: 150px;
            height: 33px;
            background-color: red;
            text-align: center;
            line-height: 33px;
            position: relative;
        }
        .menu h4{
            height: 33px;
            font-size: 14px;
            color: #fff;
        }
        .ddmenu{
            position: absolute;
            width: 100%;
            height: 300px;
            left: 0;
            top: 33px;
            border: 2px solid #c00;
            padding: 10px;
            color: #c00;
            box-sizing: border-box;
            /* 改变盒子模型的宽度，不加这个属性的话，下面的下拉菜单会超出标题的宽度，不好看 */
            display: none;
        }
    </style>
</head>

<body>
    <div class="menu">
        <h4>title</h4>
        <div class="ddmenu">
            使用jQuery动画来完成下拉菜单，
            注意动画的状态的控制和动画的停止
            老师说字多一些会很好，那我就多打点呗
        </div>
    </div>

    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            $(".menu").hover(function(){
                $(this).find(".ddmenu").slideDown(1000);
            }, function () { 
                $(this).children(".ddmenu").slideUp(1000);
                // 复习一下上节课的知识，除了能用find找到子元素，还可以用children来找到子元素
                // 切记不要忘记了class前面的点，否则就找不到了哦；
             });
            // 这里为什么不用mouseover，因为下拉菜单是要满足，鼠标放上去显示，鼠标移出来就隐藏，所以用hover(,)  
            // hover这个函数前面的参数是mouseover函数，后面的参数是mouseout函数
            // 一定要给相对定位的加事件
        })
    </script>
</body>
</html>

老师说，美好的动画效果，都是需要调试的哈哈哈哈
在这里插入图片描述
那么我们要把动画换为fadeIn（）和 fadeOut（），js部分换为如下：

 $(function(){
            $(".menu").hover(function(){
                  $(this).find(".ddmenu").fadeIn(1000);
            }, function () { ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190312160911557.gif)
                $(this).children(".ddmenu").fadeOut(1000);
            //   fadeIn 和 fadeOut 的这个效果会有一些弊端，多次把鼠标放上去拿下来，它会忘我的变化，不停的变化，解决方案就是给个条件
             });
           
        })

在这里插入图片描述
这就存在一个问题了，当我们频繁的进行操作的时候，我们的下拉菜单会不停的进行自我嗨皮，那么我们如何来改进这个问题呢？
给个判断就阔以啦，当已经有动画进行的时候，我们就不允许这个元素再增加动画就阔以啦~
js代码改成这样：

  $(function(){
            $(".menu").hover(function(){
                /*判断当前的元素是否有动画，如果没有动画，加动画，如果有动画不再增加动画*/
                if(!$(this).find(".ddmenu").is(":animated")) 
                {
                    $(this).find(".ddmenu").fadeIn(1000);
                }  
            }, function () { 
                $(this).children(".ddmenu").fadeOut(1000);
            //   fadeIn 和 fadeOut 的这个效果会有一些弊端，多次把鼠标放上去拿下来，它会忘我的变化，不停的变化，解决方案就是给个条件
             });
           
        })

改进效果：
在这里插入图片描述

老师说下面的例子，是用来练习语法的例子

**
1.动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画</title>
    <style>
        #box{
            width: 150px;
            height: 150px;
            background-color: #030;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>
<body>
    <button>动画</button>
    <button>往左走</button>
    <button>往下走</button>
    <button>停止动画</button>
    <div id="box"></div>


    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            $("button:first").click(function () {
                $("#box").animate({ //这里第一个参数是一个json的结构，里面是逗号隔开！！！
                    width:"700px",
                    height:"400px"
                }, 4000);
              });

          })
    </script>
</body>
</html>

在这里插入图片描述
那么我们知道，jQuery是链式操作，所以可以继续加动画
js改成如下：

<script>
        $(function () {
            $("button:first").click(function () {
                $("#box").animate({ //这里第一个参数是一个json的结构，里面是逗号隔开！！！
                    width:"700px",
                    height:"400px"
                }, 4000).animate({
                    width:"100px",
                    fontSize:"80px",
                    lineHeight:"300%",
                    left:"0"
                },3000);
                // jQuery是链式操作，所以可以不断地加
              });

          })
    </script>

这里要强调一点，jQuery中的animate函数，第一个参数是一个json形式的数组，里面的属性改变，需要按驼峰写法来改变属性，不能按照css的方式写了！
效果如下（可以连续加动画）：在这里插入图片描述
那么往左走的效果：
将js改变为如下：

 <script>
        $(function () {
            //   找到第二个button,这是个持续的变化
              $("button:nth-child(2)").click(function () {
                    $("#box").animate({
                        left:"-=100px",
                        // 注意这里的写法，往左走是-=， 往右走是+=
                    },500)
                });
          })
    </script>

效果如下：
在这里插入图片描述

停止动画
将js代码改为如下：

  <script>
        $(function () {
             $("button:last").click(function () {
                $("#box").stop(true);
                // stop()一次只能停止一次！！！！
                // 但是在函数中加一个true的参数就可以把所有的动画都停掉了
              })
          })
    </script>

在这里插入图片描述

好了，今天的课堂笔记就到这里了，啦啦啦啦~ 北北~

赵俸堃是我的名字

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
袁磊老师的课，小方的jQuery笔记（四），老周在边上陪着，真好！

jQuery动画一、各种动画slideDown()slideUp()fadeOut() 渐渐消失fageIn() 渐渐出现toggle() 已经被废除了slideToggle()fadeTo()animate()二、下拉菜单概要：一定是父对象：相对定位 ------position：relative下拉菜单：绝对定位 -------position：abso...
复制链接

扫一扫