jQuery效果—为操作添加艺术性

1.修改内联CSS:.css()方法

   语法：

   1).css('property','value');//传递单独的属性和值

   2).css({'property1':'value1',property2','value2');//传递Map键值对

   3).css('property')//取样式值

   说明：

   1)property同时支持连字版和驼峰式的。如:background-color或backgroundColor

   2)在Map语法中如果property使用驼峰式，引号可省略

   3).css(args)方法兼有setter和getter方法的功能。args为一个时做getter使用、为多个时做setter使用

2.基本的隐藏和显示：.hide()和.show()

   说明：

   1)可以把他们想象成.css('display','string');

   2)执行效果是立即执行，过程中不带任何效果

   3).hide()在把display的值编程none之前能记住原先的display值。通常是block或inline

      .show()使用.hide()记住的display的值

3.效果和速度.hide(args)和.show(args)

   说明：hide('speed')和.show('speed')执行过程中影响元素的高度，宽度，不透明度。

   3.1指定显示速度

        说明：

        1)字符速度参数：slow==0.6s；normal==0.4s；fast==0.2s

        2)数值速度参数：单位ms(毫秒) 如：.slow(800)

           注意：数值不需要使用引号

   3.2淡入淡出.fadeIn('speed')和fadeOut('speed')

        说明：只影响对象的不透明度

4.多重效果

   说明:

   1)jQuery的核心效果中，除.hide()和.show()会同时修改多个样式属性外，其他效果只修改一种属性

   2).animate()该方法可以创建包含多重效果的自定义动画。该方法接受以下4个参数

       (1)一个包含样式属性及值的映射

       (2)可选的速度参数

       (3)可选的缓动(easing)类型

       (4)可选的回调函数

       例：.animate({property1:'value1',property2:'value2'},speed,function(){

                alert("进入动画效果");

              });

   4.1构建具有动画效果的.show()

        说明：

        1).show('slow');

           等价于

           .animate({height:'show',width:'show',opacity:'show'},'slow');

        2)通过修改参数可自定义.show()  效果

        3).width()与.css('width')都返回width的值，单前者不带度量单位

5.并发与排队效果

   说明：.animate方法可以方便的创建效果并发，但有时我们需要效果排队

   5.1处理一组元素

        1)使用连缀的方式：实现效果排队

            例：

            $(document).ready(function(){
                $('div.label').click(function(){
                   $('div.button')
                   .fadeTo('slow',0.5)
                   .animate({left:650},'slow')
                   .fadeTo('slow',1.0)
                   .slideUp('slow');
                 });
            });

         2)连缀方式只适用于效果函数，不适用于非效果函数

   5.2处理多组元素

        1) 当为不同组的元素应用效果时，这些效果几乎同时发生

        2) 效果函数的参数：回调函数、用于对不同元素上的效果实现排队

            例：

            $(document).ready(function(){
               $('p:eq(3)').css('backgroundColor','#fcf').hide();
               $('p:eq(2)').css('backgroundColor','#cff').click(function(){
                  var $thisPara=$(this);
                  $thisPara.next().slideDown('slow',function(){
                     $thisPara.slideUp('slow');
                  });
                });
            });