Educoder/头歌JAVA——jQuery动画

陆小玖

已于 2022-12-16 17:27:48 修改

阅读量4.1k

点赞数 10

文章标签： jquery java javascript

于 2022-12-12 06:30:00 首次发布

本文链接：https://blog.csdn.net/zhou2622/article/details/128262862

版权

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

fadeIn()，fadeOut() 和 fadeToggle()

slideDown()，slideUp() 和 slideToggle()

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

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

编程要求

根据提示，在右侧编辑器Begin至End之间填充代码，要求如下：

点击隐藏按钮，橙色小框消失，速度为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动画效果——淡入淡出

编程要求

根据提示，在右侧编辑器Begin至End之间填充代码，实现下面效果，要求如下：

点击【动画开始】按钮，第一张图片透明度从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);
        $(".second").delay(2000).fadeTo(2000,0.5);
        $(".first").delay(2000).fadeOut("slow");
        $(".second").fadeOut("slow")   
  
        // ---------- End -----------
        })
    })
   </script>
</body>
</html>

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

相关知识

为了完成本关任务，你需要掌握：1.slideDown()，2.slideUp()，3.slideToggle()， 4.stop()。

slideDown()，slideUp() 和 slideToggle()

前面已经总结过：jQuery的动画语法都是一样的，只是动画名称不一样。
slideDown()是向下滑动元素，它的实现原理是：元素的高度从0变为已有的高度；
slideUp()是向上滑动元素，它的实现原理是：**元素的高度从现在的高度变为0**；
slideToggle()是切换滑动效果，它的实现原理是：向上滑动的变为向下滑动，向下滑动的变为向上滑动。
<button class="stop">动画停止</button>
<button class="slide">slide</button>
<div class="item">Hello jQuery!!!</div>
$(".stop").click(function(){
$(".item").stop();
})
当鼠标浮动到菜单时，菜单内容向下滑动，速度为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动画效果——自定义动画

平移动画

这个可以分解为两个动作：右移和左移。先说右移的情况，在右移过程中，宽度变宽了，字体变大了。

先实现往右移动，代码如下：

$(".item").animate({left: '500px'}, 2000);

说明如下：

移动改变的是left值和top值，所以在样式中一定要有**定位position**。否则，没有定位，也就没有了left属性和top属性，也就不能移动了；
基本结构中的样式left:100px作为初始状态，往右移动的实现代码中，left:'500px'作为这个动画的最终状态，实际上移动了400px；
2000表示这个动画完成的时间，是2000毫秒，可选的值是slow，fast，毫秒。

现在实现整个右移过程，实现代码如下：

$(".item").animate({left: '500px',width:'200px',fontSize:'50px'},2000)

可以发现：就是在往右移动的代码中添加了宽度和字体，需要注意的是，这里字体font-size的写法变成了fontSize，是用驼峰命名法。规则如下：

第一个单词以小写字母开始；
从第二个单词开始以后的每个单词的首字母都大写。

其他属性中带有-的，在动画中也都用驼峰命名法，比如：padding-left 变为paddingLeft。

现在实现左移的过程就很容易了，代码如下：

$(".item").animate({left: '100px', width: '10px', fontSize: '24px'}, 2000)

jQuery最大的特点就是可以链式调用，这里也不例外，右移左移的过程，简写如下：

$(".item").animate({left: '500px',width:'200px',fontSize:'50px'},2000)
.animate({left: '100px', width: '10px', fontSize: '24px'}, 2000)

举一反三：前面实现的动画效果和自定义动画，都是可以链式调用的，比如： $(".box").show().fadeOut().slideUp().animate({width: '100px'});

相对值

这个动画每次移动相同的距离，当然可以在现有的left值的基础上，加上移动的距离作为一段动画的最终状态，但是这样太麻烦了，每次都得算距离，可不可以只用相对移动的距离呢？当然可以，实现代码如下：

$(".item").animate({ left: '+=200px', borderRadius: '50%'},2000)

这行代码表示向右移动的距离为200px，在移动的过程中，从正方形变为圆 , 左移用-=。

stop()参数

现在有一个问题：当连续点击按钮【动画开始】，在点击完后，动画还在执行（点击多少次，执行多少次），需求是把一个时间段的连续点击作为一次点击。

解决办法就是，在第一个动画执行完后，把后面等待的动画都清除掉。后面等待的动画可以看作一个队列，只要把这个队列清除就可以了。

这里用停止动画的方法stop()，它是有两个参数的，都是可选的，参数详情如下：

第一个参数：是否清除动画队列，true表示是，false表示否，默认是false；
第二个参数：是否立即完成当前动画，true表示是，false表示否，默认是false。

实现代码如下：

$(".item").stop(true,false).animate({left: '+=200px', borderRadius: '50%'}, 2000)

这里如果把stop()的第二个参数设为true，会发生什么情况呢？

当连续点击第二次的时候，第一次的动画会立即执行，就会出现“闪现”的情况。

总结：不知道你注意到了没有，jQuery动画能操作的属性都是有数值的，比如：width,height,opacity,font-size,left等。颜色、背景色是不能操作的，想用的话，有颜色动画插件，可以自己试一下。

编程要求

根据提示，在右侧编辑器Begin至End之间补充代码，实现点赞效果。要求如下：

当点击【点赞】按钮时，爱心立即显示；
然后爱心向上移动 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({bottom:"+=120px",opacity:"0"},1500); 

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

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

陆小玖

关注

10
点赞
踩
64

收藏

觉得还不错? 一键收藏
打赏
0
评论
Educoder/头歌JAVA——jQuery动画

动画是使元素实现从一种样式逐渐变化为另一种样式的效果。jQuery动画包括隐藏/显示，淡入/淡出，上滑/下滑，自定义动画等效果。本实训的主要内容是jQuery动画，从动画效果的方法到自定义动画，可以创建自己想要的动画效果。
复制链接

扫一扫