课堂笔记4.09

王佳仪

于 2019-04-13 20:24:24 发布

阅读量92

点赞数

一：动画隐藏和显示

**
用到的方法：hide（）和show（）

$(document).ready(function(){
        $("#button1").click(function(){
           $ ( "p").hide(500,function(){
               alert("隐藏完成")
           })
        })
        $("#button2").click(function(){
            $( "p").show(200,function(){
                alert("显示成功")
            })
        })
        $("#button3").click(function(){
                $("p").toggle(1000,function(){
                    $("p").css({color:"yellow"})
                })
            })
        })

二：动画滑动

用到的方法：#slide和#panel

slide,#panel{
      padding: 5px;
      text-align: center;
      background-color: #33b5e5;
      border: solid 1px red;
  }
  #panel{
      display: none;
      padding: 40px;
  }
</style>
<script>
	$(document).ready(function(){
		$("#slide").click(function(){
			$("#panel").slideToggle()
		})
	})	
</script>

三： jQuery——链（chaining）

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

eg：$(“p”).css({color:“red”}).slideUp(1500).slideDown(1500).animate(backgroundColor:“blue”);

不使用链式的写法：
$(“p”).css({color:“red”});
$(“p”).slideUp(1500);
$(“p”).slideDown(1500);
$(“p”).animate(backgroundColor:“blue”);

四：animate方法创建自定义的动画

用到语法：$(select).animate({params},speed,cellback)

注意：

必须的params参数必须写在大括号内其他的参数和上面一致
2.在未给定位之前，html里的元素都默认有一个静态定位，且是不可移动的。如果想要移动，要将position设置为absolute，relative

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

比如：在css中：background-color ： black；在animate中：backgroundColor：“black”

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

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

动画效果知识点：

开始动画

$(document).ready(function(){
        $("#button").click(function(){
            $("div").animate({
                left:"200px",opacity:'0.5',height:'160px',width:'160px'
            })
        })
    })

停止动画（暂停）

注意：stop（）用于在动画完成前对他进行停止。只能暂停队列中的一个动画，如果队列有多个动画，那么暂停该动画，然后系统会执行后面的动画

$(document).ready(function(){
        $("#button").click(function(){
            var div= $("div")
            div.animate({height:"160px" ,opacity:"0.5"},1000)
            div.animate({fontSize:"2px" },1000)
            div.animate({width:"160px" ,opacity:"0.9"},1000)
            div.animate({height:"100px" ,opacity:"0.5"},1000)
          17:01 2019/4/9  div.animate({height:"100px" ,opacity:"0.9"},1000)
            div.animate({fontSize:"10px" },1000)
            $("#button1").click.(function(){
           $("div").stop()
        })
          })
            })

作业：二级菜单

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>jq实现二级才拉菜单动画效果</title>
    <script src="jquery.1.8.3min.js"></script> 
    <style>  
        a{color: white;text-decoration: none;}  
        nav li{display:block;float: left;width: 150px;height:30px;line-height: 30px;text-align: center;background: #000;position: relative;cursor: pointer;}  
        nav li a{display:block;}  
        nav li ul{display: none;width: 150px;position: absolute;left: 0;top: 30px;padding: 0;margin: 0;background-color: red;}  
    </style>
    <script>
    $(function(){
        $('.has_menu').hover(function(){
        $(this).find('ul').slideDown("1500");
    },function(){
        $(this).find('ul').slideUp("fast");
    });
    })
    
    </script>  
</head>  
<body>  
    <nav>  
        <li class="has_menu"><a href="">首页</a>  
            <ul>  
                <a href="">菜单1</a>  
                <a href="">菜单1</a>  
                <a href="">菜单1</a>  
                <a href="">菜单1</a>  
                <a href="">菜单1</a>  
            </ul>  
        </li>  
        <li  class="has_menu"><a href="">首页二</a>  
            <ul>  
                <a href="">菜单2</a>  
                <a href="">菜单2</a>  
                <a href="">菜单2</a>  
                <a href="">菜单2</a>  
                <a href="">菜单2</a>  
            </ul>  
        </li>  
        <li><a href="">菜单三</a></li>  
        <li><a href="">菜单四</a></li>  
        <li><a href="">菜单五</a></li>  
    </nav>  
</body>

王佳仪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
课堂笔记4.09

**一：动画隐藏和显示**用到的方法：hide（）和show（）$(document).ready(function(){ $("#button1").click(function(){ $ ( "p").hide(500,function(){ alert("隐藏完成") }) })...
复制链接

扫一扫