Educoder jQuery动画

最新推荐文章于 2022-07-17 14:10:58 发布

Ssaty.

最新推荐文章于 2022-07-17 14:10:58 发布

阅读量1.9k

点赞数 2

分类专栏： Educoder实训文章标签： javascript css html html5 jquery

本文链接：https://blog.csdn.net/Junds0/article/details/106676236

版权

Educoder实训专栏收录该内容

1398 篇文章 3844 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

这篇博客详细介绍了使用jQuery实现的四种动画效果：1) 隐藏/显示元素，通过点击按钮实现元素的渐隐渐现；2) 淡入淡出效果，使图片在特定时间内平滑改变透明度；3) 滑动动画，鼠标浮动到菜单上时菜单内容滑下，离开时滑上；4) 自定义动画，点击点赞按钮时爱心出现并向上移动并逐渐透明。文章强调了使用链式调用和速度控制来优化动画效果。

摘要由CSDN通过智能技术生成

第1关：jQuery动画效果——隐藏/显示

点击隐藏按钮，橙色小框消失，速度为slow，完成后弹出我隐藏了；
点击显示按钮，橙色小框显示，速度为"1s，完成后弹出我显示了；
点击toggle按钮，第一次点击，橙色小框隐藏显示；第二次点击，橙色小框显示隐藏。效果来回切换，速度为"fast，完成后弹出隐藏显示的切换。
字符串统一用双引号""表示；
点击事件直接写功能即可，即$(selector).click(function(){}

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

		<style>
			.container {
                width: 200px;
				margin: 30px auto;
			}
			
			.item {
				width: 170px;
				height: 170px;
				background: orange;
			}
			
			button {
				margin: 0 10px 20px 0;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<button class="hide">隐藏</button>
			<button class="show">显示</button>
			<button class="toggle">toggle</button>
			<div class="item"></div>
		</div>

		<script>
			$(function() {
				//------------begin---------
             $(".hide").click(function(){   
       $(".item").hide("slow",function(){
        alert("我隐藏了");
        })
             })
             $(".show").click(function(){
         $(".item").show(1000,function(){
        alert("我显示了");
        })
             })
                 $(".toggle").click(function(){
        $(".item").toggle("fast",function(){
   alert("隐藏显示的切换");
})
})
                
                //-----------end------------
			})
		</script>
	</body>

</html>

第2关：jQuery动画效果——淡入淡出

点击【动画开始】按钮，第一张图片透明度从1变为0.5，速度为2s；
第二张图片在延迟2s后，透明度也从1变为0.5，速度为2s；
两张图片一起淡出，速度为"slow"。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <style>
       .container {
            width: 60%;
            height: 260px;
            margin: 30px auto;
        }                   
       button{
            margin: 100px 20px 0 0 ;
            float: left;
        }
       img{
           width: 200px;
           height: 200px;
           float: left;
           margin-right: 30px;
       }
    </style>
</head>
<body>
    <div class="container">
         <button class="btn">动画开始</button>
         <img class="first" src="https://www.educoder.net/attachments/download/206411"/>
         <img class="second" src="https://www.educoder.net/attachments/download/206410" />
    </div>
 </div>
   <script>
    $(function(){
        
        $(".btn").click(function(){       
        // ---------- Begin -----------
             $(".first").fadeTo(2000,0.5)
             $(".first").delay(2000).fadeOut("slow")
              $(".second").delay(2000).fadeTo(2000,0.5)
              $(".second").fadeOut("slow")
             
            

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

第3关：jQuery动画效果——滑动

当鼠标浮动到菜单时，菜单内容向下滑动，速度为1s；
当鼠标离开菜单时，菜单内容向上滑动，速度为1s

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
     .menu{
         width: 120px;
         margin: 20px auto;
     }
     span{
         line-height: 50px;
         font-size: 20px;
         margin-left: 36px;
     }
     .list{
         width: 100px;
        line-height: 18px;
        border: 2px solid #888;
        padding: 0 10px;
        display: none;
     }

    </style>
</head>
<body>
    <div class="menu">
         <span>菜单</span>
        <div class="list">
            <p>新建课堂</p>
            <p>新建实训</p>
            <p>新建实训路径</p>
            <p>新建项目</p>
         </div>
    </div>
    <script>
     $(function(){
         
         //-------------- Begin ----------------
        $(".menu").mouseenter(function(){
            $(".list").slideDown(1000)
            
        })
        $(".menu").mouseleave(function(){
             $(".list").slideUp(1000)
            
        })
         //-------------- End --------------------

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

第4关：jQuery动画效果——自定义动画

当点击【点赞】按钮时，爱心立即显示；
然后爱心向上移动 120px（用相对值），同时透明度变为0，速度为1.5s。
字符串统一用双引号""表示，这里透明度0也是要加双引号的；
尽量用前面学到的方法；
用链式调用，减少DOM元素的获取

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

	<style>
	.container{
		width: 100px;
        height: 200px;
        margin: 20px auto;
        position:relative;
	}
    button{
    	position: absolute;
        left: 30px;
        bottom: 10px;
    }
    img{
        width: 30px;
        height: 30px;
        position: absolute;
        left: 36px;
        bottom: 36px;
        display: none;
    }

	</style>
</head>
<body>
    <div class="container">
    	<button class="btn">点赞</button>
    </div>

   <script>
    $(function(){
         $(".btn").click(function(){
            //向contianer里插入DOM元素 img 标签，每点击一次，插入一张图片。
            var dom = '<img class="love" src="https://www.educoder.net/attachments/download/206509" alt="爱心">';
            $(".container").append(dom);

            //--------- Begin ----------
            $(".love").show().animate({top:"-=120px",opacity:"0"},1500);

             
            //--------- End ------------
         })
    })

   </script>
</body>
</html>

Ssaty.

关注

2
点赞
踩
11

收藏

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

第1关：jQuery动画效果——隐藏/显示点击隐藏按钮，橙色小框消失，速度为slow，完成后弹出我隐藏了；点击显示按钮，橙色小框显示，速度为"1s，完成后弹出我显示了；点击toggle按钮，第一次点击，橙色小框隐藏显示；第二次点击，橙色小框显示隐藏。效果来回切换，速度为"fast，完成后弹出隐藏显示的切换。字符串统一用双引号""表示；点击事件直接写功能即可，即$(selector).click(function(){}<!doctype html><html lang="en
复制链接

扫一扫