首页 > 代码库 > jQuery理解之动画与特效（一）

jQuery理解之动画与特效（一）

2024-11-10 11:56:02   204人阅读

本节主要降级和学习jQuery的自动显隐，渐入渐出、飞入飞出。自定义动画等。
1.显示和隐藏hide()和show()
对于动画来说，显示和隐藏是最基本的效果之一，本节简单介绍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() 对于动画来说，显示和隐藏是最基本的效果之一，本节简单介绍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>

例子和第一个例子相同，只是对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 这一章。

除非设置了 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()完全相同。

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

jQuery理解之动画与特效（一）


联系
我们