高级网页设计Class-jQuery-Animate

jQuery——animate

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>animate()·½·¨</title>
<style type="text/css">
<!--
body{
	background:url(bg2.jpg);
}
div{
	background-color:#FFFF00;
	height:40px; width:80px;
	border:1px solid #000000;
	margin-top:5px; padding:5px;
	text-align:center;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("button").click(function(){
		$("#block").animate({
			opacity: "0.5",
			width: "80%",
			height: "100px",
			borderWidth: "5px",
			fontSize: "30px",
			marginTop: "40px",
			marginLeft: "20px"
		},2000);
	});
});
</script>
</head>
<body>
	<button id="go">Go>></button>
	<div id="block">动画！</div>
</body>
</html>

高级网页设计Class-jQuery-Animate
点击GO按钮，逐渐移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel</title>
<style type="text/css">
*{margin:0;padding:0;}	
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<!-- <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> -->
<script language="javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
					 .animate({top: "200px" , width :"200px"}, 3000 )
					 .fadeOut("slow");
        });
    });
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

高级网页设计Class-jQuery-Animate

最后消失在试图

3.hover(onmouseover,onmouseout)鼠标滑过和离开的效果
展示鼠标在div=menu上的时候展示下拉菜单内容，当鼠标离开的时候下拉框隐藏
slideDown slideUp

<!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>Document</title>
    <script src="../js/jquery-3.3.1.js"></script>
    <style>
        h4 {
            padding:  0 auto;
            margin: 0 auto;
        }
        .menu{
            position: relative;
            width: 150px;
            height: 30px;
            background-color: #5eba6d;
            color: #fff;
        }
        .menu>h4{
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .ddmenu{
            /*绝对定位*/
            position: absolute;
            left: 0;
            /*盒子的高度*/
            top: 30px;
            padding: 10px;
            /*绝对定位不继承宽度，width一定有*/
            width: 100%;
            border: 1px solid #1e50a2;
            line-height: 20px;
            text-indent: 2em;
            /*改变盒模型默认解释方式，width包括padding+border*/
            box-sizing: border-box;
            color: #1e50a2;
        }

    </style>
</head>
<body>
<div class="menu">
    <h4>Title</h4>
    <div class="ddmenu">
        jQuery动画，下拉菜单，注意事件添加的对象是，注意动画的状态的判断和动画的停止，注意同时触发多个动画时的效果优化,jQuery动画,jQuery动画,jQuery动画,jQuery动画,jQuery动画
    </div>
</div>
<script>
    $(function () {
        // hover(onmouseover,onmouseout)
        $(".menu").hover(function () {
            // 鼠标上滑
            // $(".ddmenu")
            // $(this)和上面￥内容menu
            $(this).find(".ddmenu").slideDown();
        },function () {
            // 鼠标离开
            $(this).children(".ddmenu").slideUp();
        })
    })
</script>
</body>
</html>

高级网页设计Class-jQuery-Animate

4.fadeIn，fadeOut渐变

<!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>Document</title>
    <script src="../js/jquery-3.3.1.js"></script>
    <style>
        h4 {
            padding:  0 auto;
            margin: 0 auto;
        }
        .menu{
            position: relative;
            width: 150px;
            height: 30px;
            background-color: #5eba6d;
            color: #fff;
        }
        .menu>h4{
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .ddmenu{
            /*绝对定位*/
            position: absolute;
            left: 0;
            /*盒子的高度*/
            top: 30px;
            padding: 10px;
            /*绝对定位不继承宽度，width一定有*/
            width: 100%;
            border: 1px solid #1e50a2;
            line-height: 20px;
            text-indent: 2em;
            /*改变盒模型默认解释方式，width包括padding+border*/
            box-sizing: border-box;
            color: #1e50a2;
        }

    </style>
</head>
<body>
<div class="menu">
    <h4>Title</h4>
    <div class="ddmenu">
        jQuery动画，下拉菜单，注意事件添加的对象是，注意动画的状态的判断和动画的停止，注意同时触发多个动画时的效果优化,jQuery动画,jQuery动画,jQuery动画,jQuery动画,jQuery动画
    </div>
</div>
<script>
    $(function () {
        // hover(onmouseover,onmouseout)
        $(".menu").hover(function () {
            // 鼠标上滑
            // $(".ddmenu")
            // $(this)和上面￥内容menu
            $(this).find(".ddmenu").fadeIn(1000);
        },function () {
            // 鼠标离开
            $(this).children(".ddmenu").fadeOut(5000);
        })
    })
</script>
</body>
</html>

鼠标滑过1s显示，鼠标离开需要5s下拉框隐藏

5.刚开始显示下拉框的内容，当鼠标滑过的时候下拉框变化width=0fontsize=0，鼠标离开的时候下拉框完全消失

<!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>Animate</title>
    <script src="../js/jquery-3.3.1.js"></script>
    <style>
        h4 {
            padding:  0 auto;
            margin: 0 auto;
        }
        .menu{
            position: relative;
            width: 150px;
            height: 30px;
            background-color: #5eba6d;
            color: #fff;
        }
        .menu>h4{
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .ddmenu{
            /*绝对定位*/
            position: absolute;
            left: 0;
            /*盒子的高度*/
            top: 30px;
            padding: 10px;
            /*绝对定位不继承宽度，width一定有*/
            width: 100%;
            border: 1px solid #1e50a2;
            line-height: 20px;
            text-indent: 2em;
            /*改变盒模型默认解释方式，width包括padding+border*/
            box-sizing: border-box;
            color: #1e50a2;
            /*display: none;*/
        }

    </style>
</head>
<body>
<div class="menu">
    <h4>Title</h4>
    <div class="ddmenu">
        jQuery动画，下拉菜单，注意事件添加的对象是，注意动画的状态的判断和动画的停止，注意同时触发多个动画时的效果优化,jQuery动画,jQuery动画,jQuery动画,jQuery动画,jQuery动画
    </div>
</div>
<script>
    $(function () {
        // hover(onmouseover,onmouseout)
        $(".menu").hover(function () {
            $(this).find(".ddmenu").animate({
                "width":0,
                "fontSize":0
            });
        },function () {
            $(this).children(".ddmenu").slideUp();
        })
    })
</script>
</body>
</html>

初始
高级网页设计Class-jQuery-Animate

鼠标在div=menu上
高级网页设计Class-jQuery-Animate
鼠标离开

6.多个下拉框，鼠标滑过显示，鼠标离开隐藏

<!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>Animate</title>
    <script src="../js/jquery-3.3.1.js"></script>
    <style>
        h4 {
            padding:  0 auto;
            margin: 0 auto;
        }
        .menu{
            position: relative;
            width: 150px;
            height: 30px;
            background-color: #5eba6d;
            color: #fff;
            float: left;
            margin: 5px;
        }
        .menu>h4{
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .ddmenu{
            /*绝对定位*/
            position: absolute;
            left: 0;
            /*盒子的高度*/
            top: 30px;
            padding: 10px;
            /*绝对定位不继承宽度，width一定有*/
            width: 100%;
            border: 1px solid #1e50a2;
            line-height: 20px;
            text-indent: 2em;
            /*改变盒模型默认解释方式，width包括padding+border*/
            box-sizing: border-box;
            color: #1e50a2;
            /*display: none;*/
        }

    </style>
</head>
<body>
<div class="menu">
    <h4>Title</h4>
    <div class="ddmenu">
        jQuery动画，下拉菜单，注意事件添加的对象是，注意动画的状态的判断和动画的停止，注意同时触发多个动画时的效果优化,jQuery动画,jQuery动画,jQuery动画,jQuery动画,jQuery动画
    </div>
</div>

<div class="menu">
    <h4>Title</h4>
    <div class="ddmenu">
        jQuery动画，下拉菜单，注意事件添加的对象是，注意动画的状态的判断和动画的停止，注意同时触发多个动画时的效果优化,jQuery动画,jQuery动画,jQuery动画,jQuery动画,jQuery动画
    </div>
</div>

<div class="menu">
    <h4>Title</h4>
    <div class="ddmenu">
        jQuery动画，下拉菜单，注意事件添加的对象是，注意动画的状态的判断和动画的停止，注意同时触发多个动画时的效果优化,jQuery动画,jQuery动画,jQuery动画,jQuery动画,jQuery动画
    </div>
</div>

<div class="menu">
    <h4>Title</h4>
    <div class="ddmenu">
        jQuery动画，下拉菜单，注意事件添加的对象是，注意动画的状态的判断和动画的停止，注意同时触发多个动画时的效果优化,jQuery动画,jQuery动画,jQuery动画,jQuery动画,jQuery动画
    </div>
</div>

<div class="menu">
    <h4>Title</h4>
    <div class="ddmenu">
        jQuery动画，下拉菜单，注意事件添加的对象是，注意动画的状态的判断和动画的停止，注意同时触发多个动画时的效果优化,jQuery动画,jQuery动画,jQuery动画,jQuery动画,jQuery动画
    </div>
</div>
<script>
    $(function () {
        // hover(onmouseover,onmouseout)
        $(".menu").hover(function () {
            // 判断前一个是否有动画效果执行结束
            // if (!$(".ddmenu").is(":animated"))
            if (!$(".ddmenu").is(":animated"))
                if (!$(this ).find("ddmenu").is(":animated"))
            $(this).find(".ddmenu").fadeIn(1000);
        },function () {
            $(this).children(".ddmenu").fadeOut(20);
        })
    })
</script>
</body>
</html>

初始状态
高级网页设计Class-jQuery-Animate
鼠标在哪个上面再显示其他隐藏，要判断之前一个是否已经隐藏再开始下一个

7.让一个div走，向左，向右，停止

先找到要操作的元素，$(“button:first”).click(function () {
$("#box").animate({},3000)动画json+t时间

<!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>Animate</title>
    <script src="../js/jquery-3.3.1.js"></script>
    <style>
        #box{
            width: 200px;
            height: 100px;
            background-color: #eee;
            color: #2d2d2d;
            border: 1px solid #1e50a2;
            position: absolute;
            left: 100px;
            top: 300px;
        }
    </style>
</head>
<body>
<button>走</button>
<button>左走</button>
<button>右走</button>
<button>停止</button>
<div id="box">动画</div>
<script>
    $(function () {
        $("button:first").click(function () {
            // $("#box").animate({},3000)动画json+t
            $("#box").animate({
                "width":"700px",
                "height":"300px",
                "fontSize":"100px",
                "lineHeight":"200px"
            },3000).animate({
                "width":"300px",
                "borderWidth":"20px",
                "fontSize":"20px",
                "padding":"20px"
            },2000)
        });
        $("button:nth-child(2)").click(function () {
            // $("#box").animate({},3000)动画json+t
            $("#box").animate({
                "left":"-=10px"

            },3000)
        });
        $("button:eq(2)").click(function () {
            // $("#box").animate({},3000)动画json+t
            $("#box").animate({
              "left":"+=10px"
            },2000)
        })
        $("button:eq(3)").click(function () {
            // $("#box").animate({},3000)动画json+t
            $("#box").stop(2000);
        })
    })
</script>
</body>
</html>

高级网页设计Class-jQuery-Animate