jQuery 动画

最新推荐文章于 2020-08-01 16:25:11 发布

空忧

最新推荐文章于 2020-08-01 16:25:11 发布

阅读量95

点赞数

分类专栏： web前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_44216701/article/details/106312061

版权

web前端专栏收录该内容

54 篇文章 0 订阅

订阅专栏

一、show()方法和hide()方法
1.show()与hide()
show()：根据hide()方法记住的display属性值来显示元素。
hide() : 将该元素的display样式改为 “none”。

	//用如下代码隐藏element元素
	$("element").hide();
	
	//与用css()的方法设置display属性效果相同
	$("element").css("display","none");

2当把元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态("block"或"inline"或其它除了"none"之外的值)

	$("element").show();

hide() 和 show() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数。

<body>
    <div style="width: 200px; height: 200px; background-color: yellow;">
    我是一个div标签</div>
    <button class="show">显示效果</button>
    <button class="hide">隐藏效果</button>
    <script>
        // 动画显示元素
        $(".show").click(function () {
            $("div").show(1000, function () {
                console.log("div动画显示完成");
            });
        });
        // 动画隐藏元素
        $(".hide").click(function () {
            $("div").hide(1000, function () {
                console.log("div动画隐藏完成");
            });
        });
    </script>
</body>

toggle()方法
我们可以使用 toggle() 方法来切换 hide() 和 show() 方法。

<body>
    <div style="width: 200px; height: 200px; background-color: yellow;">
    我是一个div标签</div>
    <button class="toggle">显示隐藏切换效果</button>
    <script>
        // 切换显示或隐藏元素
        $(".toggle").click(function () {
            $("div").toggle(1000, function () {
                console.log("切换完毕");
            });
        });
    </script>
</body>

在这里插入图片描述
slideUp()方法和slideDown()方法
slideUp()方法和slideDown()方法只会改变元素的高度
fadeIn()方法和fadeOut()方法
与show()方法不同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度
综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="fullPage/CSS/jquery.fullPage.css" />
    <script src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="fullPage/JS/jquery.fullPage.min.js"></script>

    <title>Document</title>
    <style>
        #content #first {
	color:white;
	background-color:green;
	width:240px;
	height:100px;
	margin:10px 0 0 0;
	padding:10px;
}

    </style>
</head>
<body>
    <body>
        <div id="content">
            <input id="testhide" type="button" value="隐藏">
            <input id="testshow" type="button" value="显示">
            <input id="testtoggle" type="button" value="隐藏/显示">
            <input id="testslideup" type="button" value="上滑隐藏">
            <input id="testslidedown" type="button" value="下滑显示">
            <input id="testslidetoggle" type="button" value="上/下滑显示">
            <input id="testfadein" type="button" value="淡入显示">
            <input id="testfadeout" type="button" value="淡出显示">
            <input id="testfadetoggle" type="button" value="淡入/出显示">
            <input id="testanimate" type="button" value="自定义显示">
            <div id="first">
                小样就是这个样
            </div>
        </div>
</body>
    <script>
        $(document).ready(function() {
    $("#testhide").click(function() {
        // 动画效果
        $("#first").hide("slow");
    });
    $("#testshow").click(function() {
        // 动画效果
        $("#first").show("slow");
    });
    $("#testtoggle").click(function() {
        // 动画效果
        $("#first").toggle("slow");
    });
    $("#testslideup").click(function() {
        // 动画效果
        $("#first").slideUp("slow");
    });
    $("#testslidedown").click(function() {
        // 动画效果
        $("#first").slideDown("slow");
    });
    $("#testslidetoggle").click(function() {
        // 动画效果
        $("#first").slideToggle("slow");
    });
    $("#testfadein").click(function() {
        // 动画效果
        $("#first").fadeIn("slow");
    });
    $("#testfadeout").click(function() {
        // 动画效果
        $("#first").fadeOut("slow");
    });
    $("#testfadetoggle").click(function() {
        // 动画效果
        $("#first").fadeToggle("slow");
    });
    $("#testanimate").click(function() {
        // 动画效果
        $("#first").animate({
            fontSize: "12px"
        }, "slow");
    });
});
    </script>
</body>
</html>

自定义动画方法animate()
在jQuery中，可以使用animate()方法来自定义动画
animate()的语法结构为：animate(params,speed,callback)
1params：一个包含样式属性及值的映射速度
2speed：参数，可选
3callback：在动画完成时执行的函数

$(function(){
		$("#panel").click(function(){
         $(this).animate({left:"500px"},3000);
         });

累加、累减动画

	$(function(){
		$("#panel").click(function(){
         $(this).animate({left:"+=500px"},300);
         });
         /*加上"+="或者"-="符号即表示在当前位置累加或者累减*/
	})

多重动画
同时执行多个动画

	$(function(){
		$("#panel").click(function(){
            $(this).animate({left:"500px",height:"200px"},3000);
        });
        /*运行代码后，<div>元素在向右滑动的同时，也会放大高度*/
	})

按顺序执行多个动画
如果想要按照顺序执行动画，只需要把代码按照顺序就可以

	$(function(){
		$("#panel").click(function(){
         $(this).animate({left:"500px"},3000);
         $(this).animate({height:"200px"},3000)
     })
	})

因为animate()方法都是对同一个jQuery对象进行操作，所以也可以改为链式写法
动画效果的执行具有先后顺序，称为"动画队列"

	$(function(){
		$("#panel").click(function(){
            $(this).animate({left:"500px"},3000)
                    .animate({height:"200px"},3000);
         })
	})

空忧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 动画

一、show()方法和hide()方法1.show()与hide()show()：根据hide()方法记住的display属性值来显示元素。hide() : 将该元素的display样式改为 “none”。 //用如下代码隐藏element元素 $("element").hide(); //与用css()的方法设置display属性效果相同 $("element").css("display","none");2当把元素隐藏后，可以使用show()方法将元素的display样式设
复制链接

扫一扫