jquery中的各种动画效果

注：

所有的动画效果都可以指定3种速度参数："slow"、 "normal" 、"fast"（时间长度分别为0.6秒、0.4秒和0.2秒）

使用速度关键字时要加引号，如果用数字作为时间参数时不需要加引号，如show（1000）

callback回调函数适用于jquery所有的动画效果方法

一、显示与隐藏：show()和hide()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画效果之显示与隐藏</title><script src="js/jquery-3.4.1.min.js"></script>
</head>
<body><h>鼠标移动显示与隐藏下面的文字</h><ul style="display: none"><li>鞋子</li><li>衣服</li><li>裤子</li><li>手表</li><li>电脑</li></ul>
<script>$(function () {$("h").hover(function () {$(this).next().show(1000);    //使元素在1000毫秒内显示出来},function () {$(this).next().hide(1000);    //使元素在1000毫秒内隐藏})});
</script>
</body>
</html>

注：

toggle()方法代替show()与hide()方法

切换元素的可见状态。如果元素可见，则切换为隐藏的；如果元素隐藏，则切换为可见的

<script>$(function () {$("h").hover(function () {$(this).next().toggle(1000);   })});
</script>

二、元素淡化效果：fadeIn()方法在指定一段时间内升高元素的不透明度，直到元素完全显示出来

fadeOut()方法在指定一段时间内降低元素的不透明度，直到元素完全消失

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画效果之淡入淡出</title><script src="js/jquery-3.4.1.min.js"></script>
</head>
<body><h>鼠标移动显示与隐藏下面的文字</h><ul style="display: none"><li>鞋子</li><li>衣服</li><li>裤子</li><li>手表</li><li>电脑</li></ul>
<script>$(function () {$("h").hover(function () {$(this).next().fadeIn(1000);   //元素在1000毫秒内显现},function () {$(this).next().fadeOut(1000);  //元素在1000毫秒内消失})});
</script>
</body>
</html>

注：

fadeToggle()方法代替fadeIn()和fadeOut()方法

通过不透明度变化来切换匹配元素的可见性

<script>$(function () {$("h").hover(function () {$(this).next().fadeToggle(1000);  })});
</script>

三、内容向下展开与向上隐藏：slideDown()与slideUp方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画效果之内容向下展开与向上隐藏</title><script src="js/jquery-3.4.1.min.js"></script>
</head>
<body><h>鼠标移动显示与隐藏下面的文字</h><ul style="display: none"><li>鞋子</li><li>衣服</li><li>裤子</li><li>手表</li><li>电脑</li></ul>
<script>$(function () {$("h").hover(function () {$(this).next().slideDown("slow");   //元素动画效果的速度参数为slow，切记要加引号},function () {$(this).next().slideUp("slow");})});
</script>
</body>
</html>

注：

slideToggle()方法代替slideDowm()与slideUp()方法

通过高度变化来切换匹配元素的可见性

<script>$(function () {$("h").hover(function () {$(this).next().slideToggle("slow");   })});
</script>

四、自定义动画效果：animate(params，speed，callback)方法

切记要给元素样式加上position：relative/absolute ，才能影响元素的left、right、top、botton

params：一个包含样式属性及值得映射{property1:"value1",property2:"value2"}

speed：速度参数，可选；

callback：动画完成时执行的函数，可选；

1.移动效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画效果之自定义动画</title><style type="text/css">#demo {position: relative;width: 200px;height: 200px;background-color: hotpink;}</style><script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="demo"><p>这是一个盒子</p>
</div>
<script>$(function () {$("#demo").click(function () {$(this).animate({left:"500px"},3000);  //只能点击一次});});
</script>
</body>
</html>

2.累加、累减动画：在上一个代码中设置的500px之前加上“+=”或者“-=”表示在当前位置累加或累减

<script>$(function () {$("#demo").click(function () {$(this).animate({left:"+=100px"},1000);   //可连续点击，每次点击在当前位置累加100px});});
</script>

3.多重动画：

（1）同时执行多个动画

<script>$(function () {$("#demo").click(function () {$(this).animate({left:"100px",height:"150px"},1000);  //改变位置的同时还改变高度});});
</script>

（2）按顺序执行多个动画

<script>$(function () {$("#demo").click(function () {              //第一种写法$(this).animate({left:"100px"},1000);$(this).animate({height:"150px"},1000);   //先向右移动100px，再高度变化//第二种链式写法：同一个jquery对象$(this).animate({left:"100px"},1000).animate({height:"150px"},1000);});});
</script>

五、动画回调函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画效果之自定义动画</title><style type="text/css">#demo {position: relative;width: 200px;height: 200px;background-color: hotpink;}</style><script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="demo"><p>这是一个盒子</p>
</div>
<script>$(function () {$("#demo").click(function () {// $(this).animate({left: "100px"}, 1000)//     .animate({height: "150px"}, 1000)//     .fadeOut("slow");$(this).animate({left: "100px"}, 1000)                     .animate({height: "150px"}, 1000, function () {$(this).css("border","5px solid blue");    //回调函数改变样式，不能像上面注释一样，否则css立即执行})});});
</script>
</body>
</html>

jquery中的各种动画效果相关推荐

jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果转载于:https://www.cnblogs.com/DreamDrive/p/5780292.html
深入学习jQuery的三种常见动画效果
前面的话动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画是一个大的系列,本文将详细介绍jQuery的三种常见动画效 ...
android中设置Animation 动画效果
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
前端进阶必备技能：Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
GDI+入门（5、在GDI+中绘制带动画效果的图片）
五.在GDI+中绘制带动画效果的图片 private void Form2_Load(object sender, EventArgs e) { SetStyle(ControlStyles.Doub ...
requestAnimationFrame运动框架实现播放中连续变速动画效果
上期已介绍requestAnimationFrame运动框架的基本概念和特性,本期继续了解运动框架的用途,在制作动画效果方面,运动框架可以在播放动画的同时自然.流畅地响应连续变速操作,还能解决画面卡顿 ...
jQuery/CSS3炫酷动画效果插件 animate
jQuery是一款很强大的JavaScript框架,本文介绍的9个应用插件很多都是基于jQuery的,另外,CSS3的应用让这些插件增添了不少光彩,特别是第一个动画插件Animate.css非常实用, ...
用原生JavaScript写出类似jQuery中slideUp和slideDown效果
JavaScript是本人自学的第一门语言,也是本人目前最喜欢的一门语言.由于是自学,加上没有做过任何项目(只是偶尔自己做一些小效果玩玩),所以水平不咋地,写得不好之处,欢迎各位指正. 前言在我自学 ...
搞定动画之 JQuery 中的自定义动画
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志--苏轼写在前面所谓的自定义动画就是通过 jQuery 提供的方法来完成我们自己想要的动画效果 animate()方法 jQuery 提供了 ani ...

jquery中的各种动画效果

jquery中的各种动画效果相关推荐

最新文章

热门文章