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=

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
最近在翻看John Resig的大作《ProJavaScriptTechniques》,里面讲到了如何做javascript的类型判断的问题。文中介绍了两种方式,一种是使用typeof,另一种是使用constructor。略感遗憾的是作为jquery的作者,他尽然没有介绍jquery使用的类型判断方式。不过没有关系,我在这里给大家一起总结下。 在这里我首先像大家推荐一个很好用的在线编辑器: http://jsfiddle.net/ 。他提供了jquery、mootools、prototype和YUI三个主

Extjs 几个方法的讨论 - 2015-04-04 20:04:05

相信大家在做Extjs开发的时候都使用过类似下面的代码: 复制代码 代码如下: var form_pz = new Ext.form.FormPanel({ id: "form_pz", region: "center", labelAlign: "right", lazyRender: true, frame: true, items: [{ xtype: "combo", fieldLabel: "产品名称", id: "CPMC", allowBlank: false, store: new Ext.
【一】用var 声明多个变量,比每个变量都用var快多了 复制代码 代码如下: var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop, sWindow_h = document.documentElement.clientHeight, t_h = parseInt(this.getCss(this.getId('gy_photoBox_head'),'height')), hold_h = sWind
前面有一篇提到了 匿名函数的多种调用方式 。这篇看看具名函数的多种调用方式。 1、() 平时最常用的就是()运算符来调用/执行一个函数: 复制代码 代码如下: // 无参函数fun1 function fun1() { alert('我被调用了'); } fun1(); // 有参函数fun2 function fun2(param) { alert(param); } fun2('我被调用了'); ECMAScript3后加入给Function加入了call和apply后,就有了下面两种。 2、call
本节简介(异步链接服务器对象)XMLHTTPRequest以及AJAX的简介。 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)。 AJAX有四个方面的好处:1.即减轻了服务器的负担。2带来了更好的用户体验。3.基于标准被广泛的支持。4.拥有更好的页面呈现和数据分离。 技术名称技术说明 javascriptjavascript是通用的脚本语言,AJAX是用javascript编写的 css用户界面的样式通过css来修改 DOMDOM通过jav

js格式化货币数据实现代码 - 2015-04-04 20:04:04

复制代码 代码如下: function formatCurrency(num) { var sign=""; if(isNaN(num)) { num = 0; } if(num0) { sign="-"; } var strNum=num+""; var arr1 = strNum.split("."); var hasPoint=false;//是否有小数部分 var piontPart="";//小数部分 var intPart=strNum;//整数部分 if(arr1.length=2) { h
情景一,元素style属性设置了width/height 复制代码 代码如下: divtestdiv script var div = document.getElementsByTagName('div')[0]; alert(div.style.width); /script 如上,使用el.style.width即可。如果没有在style属性中设置width,那么使用el.style.width将获取不到,如下 复制代码 代码如下: divtestdiv script var div = docume
1.jQuery代码 : 复制代码 代码如下: $(document).ready(function(){ var prevpage=$("#pre").attr("href"); var nextpage=$("#next").attr("href"); $("body").keydown(function(event){ if(event.keyCode==37 prevpage!=undefined) location=prevpage; if(event.keyCode==39 nextpage!

jQuery 版元素拖拽原型代码 - 2015-04-04 14:04:18

本文主要针对拖拽原型进行解析,给刚接触 JQuery 的爱好者一个简单的示例。 在引入 Jquery.js 后: 复制代码 代码如下: script type="text/javascript" $(function(){ //绑定拖动元素对象 bindDrag(document.getElementById('test')); }); function bindDrag(el){ //初始化参数 var els = el.style, //鼠标的 X 和 Y 轴坐标 x = y = 0; //邪恶的食指

Textarea与懒惰渲染实现代码 - 2015-04-04 14:04:18

代码如下。 复制代码 代码如下: div 立即渲染内容 ul li张三img src="p01.jpg"//li li张四img src="p02.jpg"//li /ul /div div textarea id="lazyRender01" 懒惰渲染内容 ul li李三img src="p11.jpg"//li li李四img src="p12.jpg"//li /ul /textarea /div script setTimeout(function(){//懒惰渲染 var el =document