JQuery动画效果

发布时间:2019-04-03 22:00:11发布者:Mr.Zhang阅读(124)

JQuery动画实现的注意点:

  1、JQuery 定义了 fadeIn() 和 fadeOut() 等简单方法来实现常见的视觉效果,还定义了一个 animate() 方法来实现更复杂的自定义动画

  2、JQuery 动画是异步的,动画方法会在动画完成之前返回

  3、JQuery 动画方法常使用动画时长(用毫秒数值或字符串来表示)作为第一个可选参数,忽略时长参数或指定时长JQuery无法识别时会采用默认值 400ms,字符串 "fast" 表示 200ms、"slow" 表示 600ms。同时,我们可以通过JQuery.fx.speeds["new speed"] = speed 来定义新的时长名字以及其数值

  4、JQuery 动画默认是队列化的,即如果已有一个动画在执行,新的动画需要等当前动画执行完才能执行

  5、stop([bool], [bool]) 方法用来停止当前正在执行的任何动画,第一个可选参数为 true ,则会清除选中元素上的元素队列,并取消任何等待执行的动画,为 false 时则不会取消等待执行的动画;第二个可选参数为 true 时会让指定元素停止到最终值,而 false 则会让元素状态停止在它被触发时的状态

  6、delay(speed, [queueName]) 方法直接添加一个时间延迟到动画队列里,第一个参数是时长,第二个参数是队列名(通常不需要)

 

常用JQuery动画方法:

  1、淡入淡出:fadeIn([speed], [callback])、fadeOut([speed], [callback])、fadeTo(speed, opacity, [callback]),fadeTo() 会将当前 opacity 值变化到目标值,可选参数 speed 表示动画持续时长;可选参数 callback 表示回调函数(即动画执行后调用的函数)

  2、隐藏与显示:show([speed])、hide([speed])、toggle([speed], [bool]),toggle 让元素在 show 和 hide 之间切换

  3、滑动:slideDown([speed], [callback])、slideUp([speed], [callback])、slideToggle([speed], [callback]),slideToggle 在上滑和下滑之间切换

  4、JQuery 的 animate() 方法定义:$("selector").animate({params}, [speed, callback]),其中 selector 表示选择文档的内容(可以是CSS选择器);params 是一个对象且该对象的属性名必须是 CSS 属性名(支持小驼峰,若属性名包含中划线“-”,则需要使用引号括起来),属性的值必须是动画的目标值

 

注:默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

  动画只支持数值属性,对于颜色、字体或 display 等枚举属性无法实现动画效果,但我们可以传入自定义的 CSS 属性变化函数来支持非数值动画

  fadeOut() 会让元素看不见,但其在文档里的布局仍然保存着,而 hide() 则会让元素从布局中移除

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animate</title>
// 引入 JQuery 库 <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script>
// 通过 $(function) 来执行 JQuery 代码
$(function () { $("#button1").click(function () { //animate({params},[speed,callback]); $("#div1").animate({height:'300px', opacity:'0.8'}); $("#div1").animate({width:'300px', opacity:'0.4'}); $("#div1").animate({height:'100px', opacity:'0.8'}); $("#div1").animate({width:'100px', opacity:'1'}, function () { alert("Hello Animate"); }); }); $("#button2").click(function () { $("#div1").stop(true, true); }); $("#button3").click(function () { $("#div2").animate({left: '200px', fontSize: '2em', textAlign: 'center'}); }); $("#button4").click(function () { $("#div2").animate({left: '0px', fontSize: '1em', textAlign: 'left'}); }); }); </script> </head>
<p> <button id="button1">开始动画</button>&nbsp;<button id="button2">停止动画</button> <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。如果需要改变为,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div id="div1" style="background:#98bf21;height:100px;width:100px;position:fixed;"> </div><br/><br/><br/><br/><br/><br/><br/>
<button id="button3">开始运动</button>&nbsp;<button id="button4">恢复原状态</button><br/><br/> <div id="div2" style="background-color: #98bf21; height: 100px; width: 100px; position: fixed;"> Hello World </div> </body> </html>

 





本文转自博客园,原文地址:https://www.cnblogs.com/lemonyam/p/10646289.html