jqueryajax不能返回XML的问题

如果返回的是个XML字符流而不是XML文件还是要将其转换为XML对象才可正常解析。

如下:

var xmlObject = new ActiveXObject(“Msxml.DOMDocument”);

xmlObject.async = false; 

xmlObject.loadXML(message);

$(xmlObject).find(“op”).each(function(){

  var ss = $(this).text();

  var aa = ss.split(“|”);

  var key = aa[0];

  var name = aa[1];

});

记得将datatype:xml修改成datatype:html

EASYUI表单扩展

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

<title>禁止访问</title>

<script type=”text/javascript” src=”jquery-1.4.4.min.js”></script>

<script type=”text/javascript” src=”jquery.easyui.min.js”></script>

<link rel=”stylesheet” type=”text/css” href=”themes/default/easyui.css”>

<link rel=”stylesheet” type=”text/css” href=”themes/icon.css”>

<script>

<!– 导入jquery.js  和easy_ui.js 自定义自己的 JS  家庭地址 是验证密码的–>

$(function(){

  $(‘#uiform input’).each(function () {

            if ($(this).attr(‘required’) || $(this).attr(‘validType’))

                $(this).validatebox();

        })

});

$.extend($.fn.validatebox.defaults.rules, {

    CHS: {

        validator: function (value, param) {

            return /^[\u0391-\uFFE5]+$/.test(value);

        },

        message: ‘请输入汉字’

    },

    ZIP: {

        validator: function (value, param) {

            return /^[1-9]\d{5}$/.test(value);

        },

        message: ‘邮政编码不存在’

    },

    QQ: {

        validator: function (value, param) {

            return /^[1-9]\d{4,10}$/.test(value);

        },

        message: ‘QQ号码不正确’

    },

    mobile: {

        validator: function (value, param) {

            return /^((\(\d{2,3}\))|(\d{3}\-)) 13\d{9}$/.test(value);

        },

        message: ‘手机号码不正确’

    },

    loginName: {

        validator: function (value, param) {

            return /^[\u0391-\uFFE5\w]+$/.test(value);

        },

        message: ‘登录名称只允许汉字、英文字母、数字及下划线。’

    },

    safepass: {

        validator: function (value, param) {

            return safePassword(value);

        },

        message: ‘密码由字母和数字组成,至少6位’

    },

    equalTo: {

        validator: function (value, param) {

            return value == $(param[0]).val();

        },

        message: ‘两次输入的字符不一至’

    },

    number: {

        validator: function (value, param) {

            return /^\d+$/.test(value);

        },

        message: ‘请输入数字’

    },

    idcard: {

        validator: function (value, param) {

            return idCard(value);

        },

        message:’请输入正确的身份证号码’

    }

});

/* 密码由字母和数字组成,至少6位 */

var safePassword = function (value) {

    return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\ \\\/\’\”]*)|.{0,5})$|\s/.test(value));

}

var idCard = function (value) {

    if (value.length == 18 && 18 != value.length) return false;

    var number = value.toLowerCase();

    var d, sum = 0, v = ’10×98765432′, w = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], a = ‘11,12,13,14,15,21,22,23,31,32,33,34,35,36,37,41,42,43,44,45,46,50,51,52,53,54,61,62,63,64,65,71,81,82,91’;

    var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/);

    if (re == null || a.indexOf(re[1]) < 0) return false;

    if (re[2].length == 9) {

        number = number.substr(0, 6) + ’19’ + number.substr(6);

        d = [’19’ + re[4], re[5], re[6]].join(‘-‘);

    } else d = [re[9], re[10], re[11]].join(‘-‘);

    if (!isDateTime.call(d, ‘yyyy-MM-dd’)) return false;

    for (var i = 0; i < 17; i++) sum += number.charAt(i) * w[i];

    return (re[2].length == 9 || number.charAt(17) == v.charAt(sum % 11));

}

var isDateTime = function (format, reObj) {

    format = format || ‘yyyy-MM-dd’;

    var input = this, o = {}, d = new Date();

    var f1 = format.split(/[^a-z]+/gi), f2 = input.split(/\D+/g), f3 = format.split(/[a-z]+/gi), f4 = input.split(/\d+/g);

    var len = f1.length, len1 = f3.length;

    if (len != f2.length || len1 != f4.length) return false;

    for (var i = 0; i < len1; i++) if (f3[i] != f4[i]) return false;

    for (var i = 0; i < len; i++) o[f1[i]] = f2[i];

    o.yyyy = s(o.yyyy, o.yy, d.getFullYear(), 9999, 4);

    o.MM = s(o.MM, o.M, d.getMonth() + 1, 12);

    o.dd = s(o.dd, o.d, d.getDate(), 31);

    o.hh = s(o.hh, o.h, d.getHours(), 24);

    o.mm = s(o.mm, o.m, d.getMinutes());

    o.ss = s(o.ss, o.s, d.getSeconds());

    o.ms = s(o.ms, o.ms, d.getMilliseconds(), 999, 3);

    if (o.yyyy + o.MM + o.dd + o.hh + o.mm + o.ss + o.ms < 0) return false;

    if (o.yyyy < 100) o.yyyy += (o.yyyy > 30   1900 : 2000);

    d = new Date(o.yyyy, o.MM – 1, o.dd, o.hh, o.mm, o.ss, o.ms);

    var reVal = d.getFullYear() == o.yyyy && d.getMonth() + 1 == o.MM && d.getDate() == o.dd && d.getHours() == o.hh && d.getMinutes() == o.mm && d.getSeconds() == o.ss && d.getMilliseconds() == o.ms;

    return reVal && reObj   d : reVal;

    function s(s1, s2, s3, s4, s5) {

        s4 = s4 || 60, s5 = s5 || 2;

        var reVal = s3;

        if (s1 != undefined && s1 != ” || !isNaN(s1)) reVal = s1 * 1;

        if (s2 != undefined && s2 != ” && !isNaN(s2)) reVal = s2 * 1;

        return (reVal == s1 && s1.length != s5 || reVal > s4)   -10000 : reVal;

    }

};

</script>

</head>

<body>

<table class=”grid” id=”uiform”>

<tr><td>登录名:</td><td><input  required=”true” id=”txtUsername” type=”text” class=”txt03″ /></td><td>真实姓名:</td><td><input id=”txtTruename” validType=”CHS” required=”true” type=”text” class=”txt03″ /></td></tr>

<tr><td>登录密码:</td><td><input validType=”safepass”  required=”true” id=”txtPassword” name=”password” type=”password” class=”txt03″ /></td><td>Email:</td><td><input id=”txtEmail” name=”email”  validType=”email” type=”text” class=”txt03″ /></td></tr>

<tr><td>身份证号:</td><td><input validType=”idcard” id=”txtIdcard” name=”idcard” type=”text” class=”txt03″ /></td><td>QQ:</td><td><input validType=”QQ” id=”txtQq” name=”qq” type=”text” class=”txt03″ /></td></tr>

<tr><td>手机:</td><td><input validType=”mobile” id=”txtMobile” name=”mobile” type=”text” class=”txt03″ /></td><td>电话:</td><td><input id=”txtTel” name=”tel” type=”text” class=”txt03″ /></td></tr>

<tr><td>家庭住址:</td><td colspan=”3″><input validType=”equalTo[txtMobile]” style=”width:80%” id=”txtHomeaddr” name=”homeaddr” type=”text” class=”txt03″ /></td></tr>

<tr><td>备注:</td><td colspan=”3″> <input type=”text” style=”width:80%” class=”txt03″ id=”txtRemark”></textarea></td></tr>

<tr><td>&nbsp;</td><td colspan=”3″><input id=”Checkbox1″ type=”checkbox” /><label>超级管理员</label>&nbsp;&nbsp;<input id=”Checkbox2″ type=”checkbox” /><label>禁用</label></td></tr>

</table

</body>

</html>

简单的对联广告

<html>

    <head><title>对联广告</title>

        <style>

         body{

           height:2000px;

       

         }      

             .dui{

             width:100px;

             height:400px;

             border:1px solid red;

         }  

         #left{

             float:left;

             overflow:hidden;

             position:relative;

             background:url(‘left_ad.jpg’)

         }

         #right{

             float:right;

             position:relative;

             background:url(‘right_ad.jpg’)

         }

        .fix{

        

           position:fixed;

           top:150px;     

       }

        </style>

    </head>

    <body>

        <script src=’jquery-1.4.2.min.js’></script>

        <script>

                  jQuery(document).ready(function(jquery){

              jquery(window).scroll(function (){

            var to=jquery(‘.fix’).offset().top;

            jquery(‘.dui’).animate({

             top:to+’px’

            },’200′);         

        });

    });

        </script>

      

        <div id=’left’ class=’dui’>

             <div class=’fix’></div>

        </div> 

                <div id=’right’ class=’dui’></div>

    </body>

</html>

[/html]

jquery插件开发及extend

    以下信息是在看了IBM上的一篇文章(使用 jQuery(中级),第 2 部分: 创建自己的插件)http://www.ibm.com/developerworks/cn/web/wa-aj-jquery6/ ca=drs-tp4608之后,自己的一些想法。

    这文章主要是从如何写一个插件上来说,中间主要用到的还是在jQuery.fn上做文章,通过定义一个闭包函数,将jQuery作为参数传递过去,再在这个fn增加自己的函数来实现。中间有几个问题,记录如下:

    1,为什么往fn上加函数就可以让jquery对象调用了呢?

看了下代码,注意到这句(jQuery.fn = jQuery.prototype),这句其实很明白了,jQuery.fn实际上就是jQuery.prototype,通过原型来实现一个函数的添加。而在fn上追加的函数上使用this,这个this实际上就是jQuery对象。因为fn就是prototype,调用函数者就是jQuery实现上就是jQuery的一个实例化对象。

 

    看了下文章中关于插件开发的,具体代码倒是其次,主要是其中有几个要点很重要。复制如下:

    1,让内部方法私有化,这其实就是说在自己写的插件里面,因为这个函数可能就自己的插件调用,这其实也是为了避免代码污染。在jquery中有很多例子的。

    2,让默认值可覆盖,这就是说在程序中可能会有一些默认值。所以需要在传递参数中,传递一些可以覆盖默认参数的东西,比如参数中经常传递options这个参数,其实就是拿来覆盖默认参数的。

 

    还有几个插件开发规则,复制如下:

    1,文件命名为 “jquery.<your plug-in name>.js”,这个没什么说的。

    2,所有新方法都附加到 jQuery.fn 对象,所有新功能都附加到 jQuery 对象,这个其实就是往对象上加函数。插件写法就是jQuery.fn.plugin=function(options)的这种样子。

    3,“this” 用于引用 jQuery 对象。这个如果按照第条规则,this肯定引用到jQuery的。

    4,插件中定义的所有方法/函数的末尾都必须带有一个 “;”(分号),否则将不利于代码的最小化。这个不清楚了。

    5,除有特别注明外,所有方法都必须返回 jQuery 对象,其实就是返回this。这个主要是为了链式编程吧,jQuery中到处都是这种。

    6,总是在插件代码中使用 “jQuery” 而不是 “$”。这个不是强制的,比如中我写的闭包就可以这样写:(function($))(jQuery)的这种格式,然后在里面使用$,这里的$其实就是jQuery,这个是参数传递上的东西。

 

   最后就是里面经常用到的extend函数了。简单看了下,整个函数很简单,就是一个复制过程,但在jQuery中经常用到,比如ajax就是通过extend带到jquery中的。

    这里面有个问题,我们使用ajax都是通过$.ajax这种形式访问的,这就表明ajax其实不算是jquery对象的一个方法,最多算一个静态方法。这就实际上说明,extend是往一个对象上追加信息,而$.ajax是往$这个类对象上加,而不是jqury实例对象站加,所以就不能用类似$().ajax的形式来进行ajax访问了,后者返回的是一个undefined信息。在方法内部,实际上就是一个this引用的问题了。

    还是将jquery自己的代码贴出来,在上面加注释信息。

 

jQuery.extend = jQuery.fn.extend = function() {
	//target就是复制目的是哪个对象,这里首先就是第一个参数。
	//i表示source的起始坐标。0被target占用,所以源是目的的下一个
	//length,当前参数长度了;deep,是否深度copy,深度copy就是将里面的对象再次序列化,进行迭代调用
	var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

	//处理第一个函数是boolean的情况,就是说第一个函数可以控制是否深度copy,那这样的话接下来的参数就是往后移位了.
	//jquery中很多地方都是这种处理情况,往往参数列表中有个参数缺失,那么不需要用null来占位,而是直接将后面的参数移到前面来,这样就有一个处理参数移位的问题.
	//在这个里面,第一个参数被占位,那么target就为1位了,源再+1往后走了.
	if ( typeof target === "boolean" ) {
		deep = target;
		target = arguments[1] || {};
		// skip the boolean and the target
		i = 2;
	}

	//处理这个目的不是object对象,且又不是函数的,这样的话,实际target可能就是其他东西,比如字符串或者基本类型等,这时就将target进行改变.实际上就是忽略target的原来信息.可以理解成一个用source来代替target.
	if ( typeof target !== "object" && !jQuery.isFunction(target) )
		target = {};

	//如果length==i,其实就是没有source的情况,那么将将target变成source,原先的target就直接用调用者this代替了.这样的话,其实就是直接往调用者上加东西.
	//这个用$.ajax来理解,最适合了.源代码中jQuery.extend({ajax:function()});的形式,其实就是直接往$上加函数,因为调用者就是jQuery
	if ( length == i ) {
		target = this;
		--i;
	}
	//进行循环,将source(可能有很多个source,按顺序进行copy),也就是说可以这样写$.extend(target,source1,source2);
	//这样后面的信息可以覆盖前面的信息,而source1可以是函数内置的一个默认信息,source2可以对信息进行更改.
	for ( ; i < length; i++ )
		// Only deal with non-null/undefined values
		if ( (options = arguments[ i ]) != null )
			// Extend the base object
			for ( var name in options ) {
				//这里就对两边进行取信息了,src表示从target中取的信息(这个可能是null,当然也可能不是,不是的话,那么后面的copy就可能要覆盖这个值了)
				//copy就是从source中取的信息了.
				var src = target[ name ], copy = options[ name ];

				// Prevent never-ending loop
				//这里主要是为了防止在深度copy的情况下,出现无限迭代的情况.比如这种情况:extend(true,target,{"a":target}),这样的话,就会出现无限copy了
				if ( target === copy )
					continue;

				// //这里就是处理深度copy了,如果需要,就进行深度copy,将copy后的值加到target中
				if ( deep && copy && typeof copy === "object" && !copy.nodeType )
					target[ name ] = jQuery.extend( deep, 
						// Never move original objects, clone them
						src || ( copy.length != null   [ ] : { } )
					, copy );

				// 不加undefined值
				else if ( copy !== undefined )
					target[ name ] = copy;

			}

	// 返回target
	return target;
};

     翻译都是按照自己的理解来翻译的,可能不对。

    

     在看了这个东西,感觉在其他程序中(我做java,java中很多这种)也有很多类似的设定,需要进行类似迭代处理,比较直观的就是java中java对象转json的处理了,都一样要对一个对象json化成一个string,中间仍要处理各种类型的信息,还要避免无限迭代等。

 

     以上都是整个jquery中大信息中的小小的一部分。了解一些,总比过后忘了好。

使用jQuery开发iOS风格的页面导航菜单

使用jQuery开发iOS风格的页面导航菜单

在线演示  本地下载

iOS风格的操作系统和导航方式现在越来越流行,在今天的jQuery教程中,我们将介绍如何生成一个iphone风格的菜单导航。

HTML代码

我们使用镶嵌的<li>来生成菜单内容,并且包含在<nav>标签中,如下:

<nav>
  <h1>导航菜单</h1>
  <ul>
    <li>
      <h2>专题教程</h2>
      <ul>
        <li>
          <h3>HTML专题教程</h3>
		  <ul>
				 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-introduction">GBin1专题之HTML5教程 - 第一篇:HTML5介绍</a></li>
				 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-new-elements">GBin1专题之HTML5教程 - 第二篇:HTML5元素</a></li>
				 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video">GBin1专题之HTML5教程 - 第三篇:HTML5 Video元素</a></li>
				 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video-doc">GBin1专题之HTML5教程 - 第四篇:HTML5 Video Doc</a></li>
				 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-audio">GBin1专题之HTML5教程 - 第五篇:HTML5 Audio元素</a></li>
			</ul>
        <li>
          <h3>GBin1热点秀</h3>
          <ul>
                <li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot1/">GBin1专题之Web热点秀#1</a>
                <li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot2/">GBin1专题之Web热点秀#2</a>
                <li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot3/">GBin1专题之Web热点秀#3</a>
          </ul>

      </ul>
      。。。 。。。

Javascript

使用jQuery来查询遍历li,并且生成菜单项目,如下:

…………….

 

来源:使用jQuery开发iOS风格的页面导航菜单

jqueryradio,checkbox,select操作

获取一组radio被选中项的值
var item = $(‘input[@name=items][@checked]’).val();
获取select被选中项的文本
var item = $(“select[@name=items] option[@selected]”).text();
select下拉框的第二个元素为当前选中值
$(‘#select_id’)[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$(‘input[@name=items]’).get(1).checked = true;

获取值:

文本框,文本区域:$(“#txt”).attr(“value”);
多选框checkbox:$(“#checkbox_id”).attr(“value”);
单选组radio:   $(“input[@type=radio][@checked]”).val();
下拉框select: $(‘#sel’).val();

控制表单元素:
文本框,文本区域:$(“#txt”).attr(“value”,”);//清空内容
                 $(“#txt”).attr(“value”,’11’);//填充内容

多选框checkbox: $(“#chk1”).attr(“checked”,”);//不打勾
                 $(“#chk2”).attr(“checked”,true);//打勾
                 if($(“#chk1”).attr(‘checked’)==undefined) //判断是否已经打勾

单选组radio:    $(“input[@type=radio]”).attr(“checked”,’2′);//设置value=2的项目为当前选中项
下拉框select:   $(“#sel”).attr(“value”,’-sel3′);//设置value=-sel3的项目为当前选中项
                $(“<option value=’1′>1111</option><option value=’2′>2222</option>”).appendTo(“#sel”)//添加下拉框的option
                $(“#sel”).empty();//清空下拉框

JQuery中重置

Java代码

$(‘#myform’).reset()

$(‘#myform’).reset()

但是,不幸的是,这样写的话,会有一个让你很郁闷的结果,那就是,表单无法重置!

后来,上网查了一下,说是,JQuery中没有reset方法,经核对,果然是没有。

那有么没有办法通过JQuery来重置表单呢,答案是有的,不过是一种间接的方法,如下:

Java代码

$(‘#myform’)[0].reset()

$(‘#myform’)[0].reset()

也就是通过调用 DOM 中的reset方法来重置表单。

jQuery动画效果学习

1、元素的显示和隐藏

 

display:none; 隐藏

display:block; 显示

简单显示和隐藏方法

 

a) show() 显示

b) hide() 隐藏

c) toggle() 开关,显示则隐藏,隐藏则显示

<script type="text/javascript">
    function f1(){
        //隐藏
        $("div").hide();//display:none
        //document.getElementById('id').style.display="none";
    }
    function f2(){
        //显示
        $("div").show();//display:block
    }
    function f3(){
        $("div").toggle();
    }
</script>
<style type="text/css">
     div {width:300px; height:200px; background-color:blue;}
</style>
 <body>
     <div>duck and dog</div>
      <input type="button" value="隐藏" onclick="f1()" />
      <input type="button" value="显示" onclick="f2()" />
      <input type="button" value="开关效果" onclick="f3()" />
</body>

 

CSS支持两种方法显示和隐藏元素,即使用visibility或display样式,他们控制元素显示和隐藏的时候效果相同,但是结果却不同。 

具体说明如下:

 

visibility 属性在隐藏元素的时候,同时会保存元素在文档流中的影响力,隐藏后元素的未知保持不变。该属性包括visible(默认)和hidden两个值。

display 隐藏后,隐藏的元素不再占用文档的位置。

2、滑动效果显示和隐藏

 

slideUp(speed[,callback]) 向上滑动元素并最终隐藏

slideDown(speed[,callback]) 向下滑动元素并最终显示

slideToggle(speed[,callback])

speed:设置效果的速度(slow(600)normal(400) fast(200) 时间(毫秒))

callback: 效果执行完毕之后自动调用的回调函数

 

<script type="text/javascript">
    function f1(){
        //隐藏
        $("div").slideUp(3000,function(){
            alert('我消失了,你能看到么');
        });
    }
    function f2(){
        //显示
        $("div").slideDown(3000,function(){
            alert('我又回来了');
        });//display:block
    }
    function f3(){
        $("div").slideToggle(1000);
    }
    $(function(){
        //气缸滑动效果
        //setInterval("f3()",1000);
    });
</script>
 
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
 
<body>
     <div>duck and dog</div>
     <input type="button" value="隐藏" onclick="f1()" />
     <input type="button" value="显示" onclick="f2()" />
     <input type="button" value="开关效果" onclick="f3()" />
 </body>

 

3、淡入淡出效果

 

让元素通过一定透明度变化,达到显示和隐藏的效果

 

fadeIn(speed, [callback])

fadeOut(speed, [callback])

fadeToggle(speed, [callback])开关效果

fadeTo(speed, opacity, [callback]) 把div设置一定透明度(0-1)0.3就是30%透明度

<script type="text/javascript"> 
    function f1(){
        //隐藏
        $("div").fadeOut(4000);
    }
    function f2(){
        //显示
        $("div").fadeIn(4000);
        $("#two").fadeTo(2000,0.3);
    }
 
    function f3(){
        $("div").fadeToggle(2000);
    }
 
</script>
<style type="text/css">
    div {width:300px; height:200px; background-color:blue;}
</style>
<body>
    <div id = "two">duck and dog</div>
 
    <input type="button" value="隐藏" onclick="f1()" />
    <input type="button" value="显示" onclick="f2()" />
    <input type="button" value="开关效果" onclick="f3()" />
</body>

 

设置透明度,div的透明度是30%:

 

4、动画效果底层方法animate()

 

show() hide() 等等动画效果内部都是执行animate()方法

 

$().animate(css效果参数[,时间][,回调函数]);

css()等一般jquery方法执行完毕之后会返回当前jquery对象,因此jquery的许多方法可以链式调用。

 

 

<script type="text/javascript">
    function f1(){
        //文字大小、文字粗体、div本身宽度和高度
        //font-size  background-color  color
 
        console.log($("div"));
        //jquery对象调用完毕css方法本身还是一个jquery对象
        //说明css方法执行完毕有return this关键字
        console.log($("div").css('font-weight','bold').css("background-color",'pink')); 
 
        var jn = {'font-size':'30px',width:'400px',height:'300px'};
        $("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);
 
        //$("div").animate(jn,2000);
    }
 
</script>
 
<style type="text/css">
    div {width:300px; height:200px; background-color:blue; }
</style>
 
<body>
    <div>duck and dog</div>
    <input type="button" value="设置" onclick="f1()" />
</body>

 

5、累加累减动画

 

如果动画一次设定left:500 ,第一次单击div会左移500像素,第二次单击就不会动了。累加累减就是连续动的,只需要将left:”500px”改成left:”+=500px”或者left:”-=500px”即可。

 

(function(){  
    $("#panel").click(function(){  
       $(this).animate({left: "+=500px"}, 3000);  
    })  
})

   

6、多重动画

 

1、同时执行多个动画 上面的例子只控制了left属性的变化,这回我们在控制left属性的时候同时控制元素高度变为200px

 

$(function(){  
    $("#panel").click(function(){  
       $(this).animate({left: "500px",height:"200px"}, 3000);  
    })  
})

 

2、顺序执行动画

 

上面例子中元素右移和放大高度两个动画是同时进行的。现在我们要实现先右移再放大高度,那很简单,只需要把上面的animate()方法拆开写成两个即可

 

$(function(){  
    $("#panel").click(function(){  
       $(this).animate({left: "500px"},3000)  
              .animate({height:"200px"},1000);  
    })  
})  

 

3、综合动画

 

接下来完成更复杂的动画。单击div元素后让他向右移动的同时增大他的高度,并将它的不透明度从50%切换到100%。然后再让它从上向下移动,同时它的宽度变大,当完成这 

些效果后让它以淡出的方式隐藏掉。

 

$(function(){  
    $("#panel").css("opacity",0.5);//设置不透明度  
    $("#panel").click(function(){  
       $(this).animate({left: "400px",height:"200px",opacity:"1"},3000)  
              .animate({top:"200px",width:"200px"},3000)  
              .fadeOut(1000);  
    })  
}) 

 

7、动画回调函数

 

在上例中,如果想在最后一步切换css样式而不是隐藏元素。这我们就可以用到animate的第三个参数回调函数了

 

$(function(){  
    $("#panel").css("opacity",0.5);//设置不透明度  
    $("#panel").click(function(){  
       $(this).animate({left: "400px",height:"200px",opacity:"1"},3000)  
              .animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")});  
 
    })  
}) 

 

这样就把css方法加入到动画队列中了。

 

8、停止动画和判断是否处于动画状态

 

1、停止元素的动画

 

stop([clearQueue][,gotoEnd]) 两个都是可选参数,都是boolean类型 

参数说明:

 

clearQueue:代表是否清空未执行完的动画队列

gotoEnd :代表是否将正在执行的动画跳到末状态

通过一个综合的示例就可以弄明白stop()方法的这两个参数了:

 

<style type="text/css">  
    *{margin:0;padding:0;}    
    body { font-size: 13px; line-height: 130%; padding: 60px }  
    #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}  
    .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}  
    .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}  
</style>  
<script src="../../../scripts/jquery.js" type="text/javascript"></script>  
<script type="text/javascript">  
    $(function(){  
          $("button:eq(0)").click(function () {  
              $("#panel")  
                .animate({height : "150" } , 2000 )  
                .animate({width : "300" } , 2000 )  
                .hide(3000)  
                .animate({height : "show" , width : "show" , opacity : "show" } , 2000 )  
                .animate({height : "500"} , 2000 );  
          });  
          $("button:eq(1)").click(function () {  
              $("#panel").stop();//停止当前动画,继续下一个动画  
          });  
          $("button:eq(2)").click(function () {  
              $("#panel").stop(true);//清除元素的所有动画  
          });  
          $("button:eq(3)").click(function () {  
              $("#panel").stop(false,true);//让当前动画直接到达末状态 ,继续下一个动画  
          });  
          $("button:eq(4)").click(function () {  
              $("#panel").stop(true,true);//清除元素的所有动画,让当前动画直接到达末状态   
          });  
 
    })  
</script>  
 
<body>  
    <button>开始一连串动画</button>  
    <button>stop()</button>  
    <button>stop(true)</button>  
    <button>stop(false,true)</button>  
    <button>stop(true,true)</button>  
    <div id="panel">  
        <h5 class="head">三国杀杀天下</h5>  
        <div class="content">  
            夏侯惇的眼睛,陆逊的联营,郭嘉司马深深的基情  
        </div>  
    </div>  
</body>  
</html>

 

2、判断元素是否处于动画状态

 

当使用animate()方法的时候,要避免动画的累积导致的动画与用户的行为不一致的现象。当用户快速在某个元素上执行animate()动画时,就会出现动画累积。

 

解决办法是判断元素是否正在处于动画状态,当不处于动画状态的时候,才为元素添加新的动画。 

用法:

 

if(!$(element).is(":animated")){  
    //添加新的动画  
}