Educoder jQuery动画

最新推荐文章于 2024-04-22 15:28:53 发布

川尚丘库

最新推荐文章于 2024-04-22 15:28:53 发布

阅读量579

点赞数 1

分类专栏：（jQuery+Bootstrap) of Educoder 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_65391975/article/details/128191031

版权

（jQuery+Bootstrap) of Educoder 专栏收录该内容

5 篇文章 3 订阅

订阅专栏

Educoder jQuery动画

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

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

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

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

Educoder jQuery动画

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

<!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动画效果——淡入淡出

<!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);
        $(".second").delay(2000).fadeTo(2000,0.5);
        $(".first").delay(2000).fadeOut("slow");
        $(".second").fadeOut("slow")    
            
            

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

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

<!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动画效果——自定义动画

<!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({bottom:"+=120px",opacity:"0"},1500);

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

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

川尚丘库

关注

1
点赞
踩
7

收藏

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

Educoder jQuery动画第1关：jQuery动画效果——隐藏/显示第2关：jQuery动画效果——淡入淡出第3关：jQuery动画效果——滑动第4关：jQuery动画效果——自定义动画
复制链接

扫一扫