程序员人生 网站导航

jQuery学习笔记之(一)动画与特效

栏目:htmlcss时间:2015-02-10 08:34:54

本节主要降级和学习jQuery的自动显隐,渐入渐出、飞入飞出。自定义动画等。
1.显示和隐藏hide()和show()
对动画来讲,显示和隐藏是最基本的效果之1,本节简单介绍jQuery的显示和隐藏。

复制代码
<script type="text/javascript"> $(function() { $("input:first").click(function() { $("p").hide(); //隐藏 }); $("input:last").click(function() { $("p").show(); //显示 }); }); </script> <input type="button" value="Hide"> <input type="button" value="Show"> <p>点击按钮,看看效果</p> <div><em>本节主要降级和学习jQuery的自动显隐,渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对动画来讲,显示和隐藏是最基本的效果之1,本节简单介绍jQuery的显示和隐藏。</em> </div>
复制代码

以上是对hide()和show()函数的测试。

2.使用show()、hide()和toggle()方法
上个例子对show()和hide()方法做了简单介绍,其实这两个方法可以接受参数控制显隐藏进程。
语法以下

show(duration,[callback]); hide(duration,[callback]);

其中,duration表示动画履行时间的长短,可以表示速度的字符串,包括slow,normal,fast.也能够是表示时间的整数(毫秒)。callback是可选的回调函数。在动画完成以后履行。

复制代码
<script type="text/javascript"> $(function() { $("input:first").click(function() { $("p").hide(300); //隐藏 }); $("input:last").click(function() { $("p").show(500); //显示 }); }); </script>
复制代码

例子和第1个例子相同,只是对hide()和show()增加了时间参数。其实toogle()也能够加入事件参数。

2.使用fadeIn()和fadeOut()方式
对动画效果显隐,jQuery还提供了fadeIn()个fadeOut这两个实用的方法,他们的动画效果类似退色,语法与slow()和hide()完全相同。

fadeIn(duration, [callback]); fadeOut(duration, [callback]);

例子

复制代码
<script type="text/javascript"> $(function() { $("input:eq(0)").click(function() { $("img").fadeOut(3000); //逐步fadeOut }); $("input:eq(1)").click(function() { $("img").fadeIn(1000); //逐步fadeIn }); }); </script> <img src="http://study.ahthw.com/gtimg/book/2014/11/201411120129479688.jpg"> <input type="button" value="Hide"> <input type="button" value="Show">
复制代码

fadeTo()方法的使用。

fadeTo() 方法将被选元素的不透明度逐步地改变成指定的值。

例子:

复制代码
<script type="text/javascript"> $(function() { $("input:eq(0)").click(function() { $("img").fadeOut(1000); }); $("input:eq(1)").click(function() { $("img").fadeIn(1000); }); $("input:eq(2)").click(function() { $("img").fadeTo(1000, 0.5); }); $("input:eq(3)").click(function() { $("img").fadeTo(1000, 0); }); }); </script> <p><img src="03.jpg"></p> <input type="button" value="FadeOut"> <input type="button" value="FadeIn"> <input type="button" value="FadeTo 0.5"> <input type="button" value="FadeTo 0">
复制代码

fadeOut相干参数

speed

可选。规定元素从当前透明度到指定透明度的速度。

可能的值:

  • 毫秒 (比如 1500)
  • "slow"
  • "normal"
  • "fast"
opacity 必须。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback

可选。fadeTo 函数履行完以后,要履行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这1章。

除非设置了 speed 参数,否则不能设置该参数。

3.幻灯片slideUp和slideDown效果

复制代码
<script type="text/javascript"> $(function() { $("input:eq(0)").click(function() { $("div").add("img").slideUp(1000); }); $("input:eq(1)").click(function() { $("div").add("img").slideDown(1000); }); $("input:eq(2)").click(function() { $("div").add("img").hide(1000); }); $("input:eq(3)").click(function() { $("div").add("img").show(1000); }); }); </script> <input type="button" value="SlideUp"> <input type="button" value="SlideDown"> <input type="button" value="Hide"> <input type="button" value="Show"><br> <div></div><img src="04.jpg">
复制代码

前面提到了几种动画效果,jQuery还提供了slideUp()和slideDown()来摹拟PPT中的类似幻灯片拉帘效果,它与slow()和hide()完全相同。

以上代码定义了1个div和1个img,用add方法组合在1起。

4.自定义动画

斟酌到框架的通用性及代码文件的大小,jQuery不能涵盖所有的动画效果,但它提供了animate()方法,能够使开发者自定义动画。本节主要通过介绍animate()方法的两种情势及利用。

animate()方法给开发者很大的空间。它1共有两种情势。第1种情势比较经常使用。用法以下

animate(params,[duration],[easing],[callback])

其中params为希望进行变幻的css属性列表,和希望变化到的终究值,duration为可选项,与show()/hide()的参数含义完全相同。easing为可选参数,通常供动画插件使用。 用来控制节奏的变化进程。jQuery中只提供了linear和swing两个值.callback为可选的回调函数。在动画完成后触发。

 需要注意。params中的变量遵守camel命名方式。例如paddingLeft不能写成padding-left.另外,params只能是css中用数值表示的属性。例如width.top.opacity等

像backgroundColor这样的属性不被animate支持。

复制代码
<style> div { background-color: #FFFF00; height: 40px; width: 80px; border: 1px solid #000000; margin-top: 5px; padding: 5px; text-align: center; } </style> <script type="text/javascript"> $(function() { $("button").click(function() { $("#block").animate({ opacity: "0.5", width: "80%", height: "100px", borderWidth: "5px", fontSize: "30px", marginTop: "40px", marginLeft: "20px" }, 2000); }); }); </script> <button id="go">Go>></button> <div id="block">动画!</div>
复制代码

在params中,jQuery还可以用“+=”或"-="来表示相对变化。如

复制代码
<style> div { background-color: #FFFF00; height: 40px; width: 80px; border: 1px solid #000000; margin-top: 5px; padding: 5px; text-align: center; position: absolute; } </style> <script type="text/javascript"> $(function() { $("button:first").click(function() { $("#block").animate({ left: "-=80px" //相对左移 }, 300); }); $("button:last").click(function() { $("#block").animate({ left: "+=80px" //相对右移 }, 300); }); }); </script> <button >Go>></
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐