jQuery理解之动画与特效(一)

本节主要降级和学习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方法组合在一起。

时间: 2024-10-11 04:06:07

jQuery理解之动画与特效(一)的相关文章

jQuery复习—用动画和特效装扮页面(队列未整理)

用动画和特效装扮页面 一.显示和隐藏元素 设置元素的style.display属性(none/block/inline) 1.简单的改变元素显示和隐藏 (1).显示 show() (2).隐藏 hide() (3).切换状态 toggle() 2.渐变的显示和隐藏元素 (1).显示 show(speed,callback) (2).隐藏 hide(speed,callback) (3).切换状态 toggle(speed,callback) 参数说明: speed: 数字或者字符串.可以是若干毫

JQuery之动画与特效

学编程吧JQuery之动画与特效发布了,欢迎通过xuebiancheng8.com 显示与隐藏 show(spped,[callback])与hide(spped,[callback]) speed可选填slow.normal.fast,对应的速度分别为600ms.400ms.200ms.也可以直接填毫秒数,callback函数为回调函数,动作完成后调用此函数 [javascript] view plaincopyprint? $("img").show(3000,function()

jquery html5图表动画圆形饼图特效

上图: html和jquery实现的饼图特效,效果特好 使用方法: 引入脚本和css <link href="css/style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script src="

jQuery+CSS3过渡动画模态窗口特效

在线预览   源码下载 jQuery+CSS3过渡动画模态窗口特效是一款基于Codrops的ModalWindowEffects来制作,通过jQuery插件的方式来统一管理各种打开模态窗口的效果.适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器. 加入前端爱好者QQ群(123235875) 点击加群,共同交流进度!

基于jQuery点击加载动画按钮特效

分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center"> <p> <button c

jQuery动画与特效

参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQuery实现点击式选项卡jQuery实现select三级联动 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 4

jQuery碎语(3) 动画特效

5.动画特效 ● 自制折叠内容块 内容块如下 <div class="module"> <div class="caption"> <span>标题</span> <img src="rollup.gif" alt="rollup" title="rolls up this module"/> </div> <div class=

8款超绚丽的jQuery焦点图动画

随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的就是一些超绚丽的jQuery焦点图动画插件,有些不仅基于jQuery,还带有CSS3的动画特效,因此显得更加炫酷. 1.jQuery实用图片滑块焦点图 支持移动端滑动 今天我们要再来介绍一款jQuery实用图片滑块焦点图,它也支持移动端的触屏滑动,这款插件并没有特别的动画效果,但方便实用. 在线演示

基于jQuery超级酷动画滑动插件

分享一款基于jQuery超级酷动画滑动插件.这是一款基于jquery.pogo-slider插件实现的多个滑块切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="pogoSlider" id="js-main-slider"> <div class="pogoSlider-slide" data-transition="slideOverLeft" data-