0409课堂笔记

最新推荐文章于 2023-01-07 11:09:27 发布

我喜欢红皮皮

最新推荐文章于 2023-01-07 11:09:27 发布

阅读量99

点赞数

本文链接：https://blog.csdn.net/weixin_44234434/article/details/89287354

版权

jQuery动画效果:隐藏和显示

使用hide()方法隐藏：
$('selected').hide(speed,cellback)
使用show()方法展示
$('selected').show(speed,cellback)

speed，规定了隐藏/显示的速度，取值为'slow','fast',毫秒（单位为毫秒）
cellback，规定了隐藏/显示完成之后，执行的方法（回调函数的一种）

例子，
$('p').hide(1000);
alert('恭喜隐藏成功');
和
$('p').show(1000,function(){alert("恭喜显示成功")});

的效果是不同的

toggle(),切换hide和show的状态（一个按钮实现hide和show的切换）

jQuery动画效果:滑动效果

slideUp()
向上滑动

slideDown()
向上滑动

slideToggle()
切换滑动模式
属性和显示/隐藏一致，speed和cellback

toggle是切换的意思，在动画效果方法的后面加上

jQuery的动画效果：

animate方法用于创建自定义的动画

$(select).animate({params},speed,cellback)
必须的params参数必须写在大括号内
其他的参数和上面一致

例子:用animate方法实现<div>移动

注意：在未给定位之前，html里的元素都默认有一个静态定位，且是不可移动的。如果想要移动，要将position设置为absolute，relative

再注意：animate方法几乎可以改变所有的的css属性，但前提是该属性用驼峰命名法命名：

例子：在css中：background-color ： black；在animate中：backgroundColor：“black”，

animate使用相对值：
在需要提升的值上加“+=”，即可实现“继续增加”

animate使用队列功能：
如果你在之后编写多个animate()调用，jQuery会创建包含这些方法内部调用的队列

jQuery停止动画：stop()

stop()用于在动画完成前对它进行停止，只能暂停队列中的一个动画，如果队列中有很多个动画，它会结束当前的动画，然后运行下一个动画

jQuery——链（chaining）

通过jQuery，可以把方法连接在一起，chaining允许我们在一条语句中运行多个方法（在同一元素上）

$("p").css({color:"red"}).slideUp(1500).slideDown(1500).animate(backgroundColor:"blue");

这段方法的效果是：首先文字变红，接着向上滑动1.5秒，然后向下滑动1.5秒，最后背景变成蓝色

不使用链式的写法是：
$("p").css({color:"red"});
$("p").slideUp(1500);

$("p").slideDown(1500);
$("p").animate(backgroundColor:"blue");

链式的优点是：在使用相关元素的时候，可以不用反复查询同样的元素

作业：二级菜单

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>二级菜单</title>
       <script src="jquery-1.8.3.min.js"></script>
       <script>
           $(document).ready(function(){

           })
       </script>
       <style>
           *{
               list-style: none;
               text-decoration: none;
               font-family: "黑体";
           }
           a{
               color: black;
           }
           nav{
               height: 40px;
               width: 500px;
               background-color: aqua;
               margin: 0 auto;
           }
           nav ul {
               margin: 0 auto;
           }
           nav ul li{
               height: 40px;
               width: 70px;
               text-align: center;
               line-height: 40px;
               float: left;
               margin-left: 8px;
               position: relative;
           }
           nav ul li:hover{
               background-color: green;
           }
           nav ul li:hover a{
               color: yellow;
           }
           nav ul li ul{
               float: none;
               padding: 0;
               position: absolute;
               left: -8px;
               display: none;
           }
           nav ul li ul li{
               background-color: indigo;
               height: 40px;
               width: 90px;
           }
           nav ul li ul li:hover{
               background-color: yellow;

           }
           nav ul li ul li:hover a{
               color: indigo;

           }
       </style>
   </head>
   <body>
       <nav>
           <ul>
               <li>
                   <a href="#">首页</a>
               </li>
               <li οnmοuseοut="divDisplay_one()" οnmοuseleave="div_one()">
                   <a href="#">课程大厅</a>
                   <ul id="one">
                       <li>
                           <a href="#">web网页实战</a>
                       </li>
                       <li>
                           <a href="#">服务端技术</a>
                       </li>
                       <li>
                           <a href="#">Python技术</a>
                       </li>
                   </ul>
               </li>
               <li>
                   <a href="#">学习中心</a>
               </li>
               <li οnmοuseοut="divDisplay_two()" οnmοuseleave="div_two()">
                   <a href="#">经典案例</a>
                   <ul id="two">
                       <li>
                           <a href="#">Java</a>
                       </li>
                       <li>
                           <a href="#">HTML</a>
                       </li>
                       <li>
                           <a href="#">C#</a>
                       </li>
                   </ul>
               </li>
               <li>
                   <a href="#">关于我们</a>
               </li>
           </ul>
       </nav>
   </body>
   <script>
       var a = $("#one");
       var b = $("#two");
       function divDisplay_one(){
           a.css({display:"block"});
       }
       function div_one(){
           a.css({display:"none"});
       }
       function divDisplay_two(){
           b.css({display:"block"});
       }
       function div_two(){
           b.css({display:"none"});
       }
   </script>
</html>