老蒋jQuery学习笔记第三课：效果－为操作添加艺术性
Tag: JQuery | Author: 老蒋 |
修改内联的CSS
- $(document).ready(function(){
- $('.button').click(function(){
- var $speech=$('div.speech');
- var currentSize=$speech.css('fontSize');
- //alert(currentSize);
- var num=parseFloat(currentSize,10);
- var unit=currentSize.slice(-2);
- if (this.id=='switcher-large'){
- num*=1.4;}
- else if (this.id=='switcher-small'){
- num/=1.4;
- }
- $speech.css('fontSize',num+unit);
- });
- });
隐藏与显示
.hide()/.show()
.hide()能记住原先的display值
指定显示速度 show(’slow’);
淡入和淡出
fadeIn()/fadeOut()
多重效果
fadeIn()/fadeOut() 不透明度
fadeTo()不透明度
slideDown()/slideUp()高度
animate()方法
要调整left属性，必须把CSS定位设置成relative或absolute
动画效果实例
- <!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=utf-8" />
- <script src="jquery-1.2.6.js" ></script>
- <title>无标题文档</title>
- <style>
- #switcher{
- position:relative;}
- .button{
- position:relative;
- width:140px;
- padding:5px;
- border:1px solid #e3e3e3;
- margin:.5em 0;}
- </style>
- <script language="javascript">
- $(document).ready(function(){
- $('.button').click(function(){
- var $speech=$('div.speech');
- var currentSize=$speech.css('fontSize');
- //alert(currentSize);
- var num=parseFloat(currentSize,10);
- var unit=currentSize.slice(-2);
- if (this.id=='switcher-large'){
- num*=1.4;}
- else if (this.id=='switcher-small'){
- num/=1.4;
- }
- $speech.css('fontSize',num+unit);
- });
- $('p:eq(1)').hide();
- $('span.more').click(function(){
- $('p:eq(1)').show('slow');
- //$('p:eq(1)').fadeIn('slow');
- //$('p:eq(1)').fadeOut('slow');
- $(this).hide();
- });
- $('div.label').click(function(){
- $('div.button').animate({left:650,height:38},'slow');
- });
- });
- </script>
- </head>
- <body>
- <div id="switcher" >
- <div class="label">Style Switcher</div>
- <div class="button" id="switcher-small">Decrease Text Size</div>
- <div class="button" id="switcher-large">Increase Text Size</div>
- </div>
- <div class="speech">
- <p>kdf d dfsdlfjdfjsdfjsdfjdffjkdfsdjfds;fksd;fjd;fjsd;fjsdf;dfsdj;<br />fksdf;sdffjdffjkdfsdjfds;fksd;fjd;fjsd;fjsdf;dfsdj;fksdf;sdffjd<br />ffjkdfsdjfds;fksd;fjd;fjsd;fjsdf;dfsdj;fksdf;sdf
- <span class="more">...</span></p>
- <p>fjdffjkdfsdjfds;fksd;fjd;fjsd;fjsdf;dfsdj;fksdf;sdffjdffjkdfsdjfd<br />s;fksd;fjd;fjsd;fjsdf;dfsdj;fksdf;sdffjdffjkdfsdjfds;fksd;fjd;fjsd;<br />fjsdf;dfsdj;fksdf;sdffjdffjkdfsdjfds;fksd;fjd;fjsd;fjsdf;dfsdj;fksdf;<br />sdffjdffjkdfsdjfds;fksd;fjd;fjsd;fjsdf;dfsdj;fksdf;sdffjdffjkdfsdjfds<br />;fksd;fjd;fjsd;fjsdf;dfsdj;fksdf;sdffjdffjkdfsdjfds;fksd;fjd;fjsd;fjsd<br />f;dfsdj;fksdf;sdffjdffjkdfsdjfds;fksd;fjd;fjsd;fjsdf;dfsdj;fksdf;sdffjd<br />ffjkdfsdjfds;fksd;fjd;fjsd;fjsdf;dfsdj;fksdf;sdffjdffjkdfsdjfds;fksd;fj<br />d;fjsd;fjsdf;dfsdj;fksdf;sdffjdffjkdfsdjfds;fksd;fjd;fjsd;fjsdf;dfsdj;fk<br />sdf;sdffjdffjkdfsdjfds;fksd;fjd;fjsd;fjsdf;dfsdj;fksdf;sdffjdffjkdfsdjfds<br />;fksd;fjd;fjsd;fjsdf;dfsdj;fksdf;sdffjdffjkdfsdjfds;fksd;fjd;fjsd;fjsdf<br />;dfsdj;fksdf;sdf.</p>
- </div>
- </body>
- </html>
- $('div.label').click(function(){
- alert("a");
- var paraWidth=$('div.speech p').width();
- var $button=$('div.button');
- var buttonWidth=$button.width();
- var paddingRight=$button.css('paddingRight');
- var paddingLeft=$button.css('paddingLeft');
- var borderRightWidth=$button.css('borderRightWidth');
- var borderLeftWidth=$button.css('borderLeftWidth');
- var totalButtonWidth=parseInt(buttonWidth,10)+parseInt(paddingRight,10)+parseInt(paddingLeft,10)+parseInt(borderRightWidth,10)+parseInt(borderLeftWidth,10);
- var rightSize=paraWidth-totalButtonWidth;
- $button.animate({left:rightSize,height:38},'slow');
- );
- });
并发与排队
- $(document).ready(function(){
- $('div.label').click(function(){
- $('div.button')
- .fadeTo('slow',0.5)
- .animate({left:650},'slow')
- .animate({height:38},'slow')
- .fadeTo('slow',1.0,function(){
- $(this).css('backgroundColor','#f00');
- });
- //.slideUp('slow');
- });
- });
Leave a comment
您必须 登录 后才能发表留言。