查看文章 |
jQuery基础教程笔记2
2008-06-30 10:03
14，width()和css('width') <script src="jquery.js" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ $('#test').click(function(){ var t1 = $('#a').width(); var t2 = $('#a').css('width'); alert( t1 ); //200 ， 不带单位 alert( t2 ); //200px ， 带单位 alert( parseInt(t2) ) //200 ， 不带单位 }) }) </SCRIPT> <DIV id="a" style="width:200px">a</div> <input type="button" id="test" value="test" /> 15：animate()做动画效果时，动画执行的顺序。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <script src="jquery.js" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ $('#test').click(function(){ $('#a').animate({left : "300px" } , "slow" ) .animate({ top : "300px" } , "slow" ); }) }) </SCRIPT> <DIV id="a" style="position:absolute;width:10px;height:10px;">a</div> <input type="button" id="test" value="test" /> //发生上面是按照顺序来执行的。先改变left，然后再改变top 对比: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <script src="[url=http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js]http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js[/url]" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ $('#test').click(function(){ $('#a').animate({left : "300px" , top : "300px"} , "slow" ) }) }) </SCRIPT> <DIV id="a" style="position:absolute;width:10px;height:10px;">a</div> <input type="button" id="test" value="test" /> //发生上面是一起执行的，也就是 left和top 一起改变。 区别知道了吧。 16,同理，我们再看一个例子： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <script src="jquery.js" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ $('#test').click(function(){ $('#a').animate({left : "300px" } , "slow" ) .fadeTo('slow',0.2) .animate({ top : "300px" } , "slow" ) .fadeTo('slow',1); //排队效果会一个个执行。 }) }) </SCRIPT> <DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div> <input type="button" id="test" value="test" /> //当animate()跟其他动画效果执行的时候，也是排队执行的。也就是一个个来。 对比：css() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <script src="jquery.js" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ $('#test').click(function(){ $('#a').animate({left : "300px" } , "slow" ) .fadeTo('slow',0.2) .animate({ top : "300px" } , "slow" ) .fadeTo('slow',1) .css("backgroundColor","#000"); //虽然css写在最后，但点击一开始就会执行。 //排队效果并不适合 .css() }) }) </SCRIPT> <DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div> <input type="button" id="test" value="test" /> 解决： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <script src="jquery.js" type="text/javascript"></script> <SCRIPT LANGUAGE="JavaScript"> $(function(){ $('#test').click(function(){ $('#a').animate({left : "300px" } , "slow" ) .fadeTo('slow',0.2) .animate({ top : "300px" } , "slow" ) .fadeTo('slow',1 ,function(){ $(this).css("backgroundColor","#000"); }) //我们可以把他写在 最后一个效果的 回调函数里。 }) }) </SCRIPT> <DIV id="a" style="position:absolute;width:40px;height:40px;top:100px;background:red;">a</div> <input type="button" id="test" value="test" /> 总结： 当在animate 中以多个属性的方式应用时， 效果是同时发生的。 当以 连续方式 应用时， 是按顺序来的。 非效果方法，比如.css()方式不是按照顺序来的，解决方法是 放在回调函数里。 |
最近读者：
