jQuery动画与特效的方法

在页面中，元素的显示与隐藏是使用最频繁的操作。在传统的JavaScript中，一般通过display样式属性来实现。
例如：
...

document.getElementById("content").style.display="block";
document.getElementById("con").style.display="none";

...

show()方法、hide()方法和toggle()方法

show()方法用于显示页面中的元素，hide()方法则隐藏页面中的元素。
toggle()方法除了可以模拟鼠标的连续单击事件之外，同时还会动态地改变当前元素的高度、宽度和不透明度，最终切换当前元素的可见状态。即如果元素是可见的，则被切换为隐藏状态；如果元素是隐藏的，则被切换为可见状态。
这三种方法参数含义都是一致的，都可以使用关键字slow、normal和fast。
...

jQuery对象.show(duration,[fn]);

...
...

<script>
     $("#btn").click(function(){
       if($(this).val()=="显示"){
         $("#pic").show("slow",function(){
            $(this).css({"border":"1px solid #ccc","padding":"5px"});
         });
       $(this).val("隐藏")
       }else{
          $("#pic").hide("slow");
          $(this).val("显示");
       }
      });
   });
</script>

...
...

<script>
   $(function(){
      $("#menu li.lastItem").click(function(){
          //切换菜单
          $("#menu li:gt(3):not(:last)").toggle();
          //更换底部箭头方向
          $(this).toggleClass("down");
      });
   });
</script>

...

fadeIn()方法、fadeOut()方法\、fadeToggle()方法和fadeTo方法

show()方法和hide()方法与fadeIn()方法和fadeOut()方法相比较，相同之处是都具有改变元素显示与隐藏状态的功能，不同之处在于，show()方法和hide()方法的动画效果使元素的宽度、高度和透明度属性都发生了变化，而fadeIn()方法和fadeOut()方法仅改变元素的透明度，并不修改其他属性。
...

<script>
    $(function(){
       $("#btn").click(function(){
          if($(this).val()=="淡入"){
              $("#pic").fadeIn("slow",function(){
                  $(this).css({"border":"1px solid #ccc","padding":"5px"});
              });
              $(this).val("淡出");
          }else{
              $("#pic").fadeOut("slow");
              $(this).val("淡入");
          }
       });
    });
</script>

...
fadeToggle()会动态改变当前元素的透明度，最终切换当前元素的可见状态。
...

<script>
  $(function(){
    $("#menu li.lastItem").click(function(){
          //切换菜单
         $("#menu li:gt(3):not(:last)").fadeToggle();
         //更换底部箭头方向
         $(this).toggleClass("down");
    });
  });
</script>

...
fadeIn()方法和fadeOut()方法通过改变元素的透明度来实现元素的显示和隐藏，如果要将透明度指定到某一个值，则需要调用fadeTo()方法。
...

jQuery对象.fadeTo(duration,opacity,[fn]);

...
参数opacity用于指定不透明值，取值范围是0~1,0代表完全透明，1代表完全不透明。
...

<head>
  <script src="jquery-1.11.0.min.js"></script>
</head>
<body>
    <p><img src="two.jpg" /></p>
   <p>
       <select id="sel">
          <option value="0.2">0.2</option>
          <option value="0.4">0.4</option>
          <option value="0.6">0.6</option>
          <option value="0.8">0.8</option>
       </select>
   </p>
  <script>
     $(function(){
       $("#sel").change(function(){
             var opacity=$(this).val();
             $("img").fadeTo(3000,opacity);
       });
     });
  </script>
</body>

...

slideDown()方法、slideUp()方法和slideToggle()方法

slideDown()方法和slideUp()方法都会动态地改变当前元素的高度（其他不变），但是两者的区别是，前者是由上向下滑入，即高度向下增大，使其呈现出一种“滑动”的效果，直至最终显示当前元素，此时元素的css属性display恢复除none之外的初始值。而后者则是由下到上滑出，即高度向上减小，直至最终隐藏当前元素，此时元素的css属性display修改为none.
...

<script>
  $(function(){
     $(".secondLi").hover(function(){
           $(".secondLi ul").slideDown(500);
     },function(){
           $(".secondLi ul").slideUp(500);
     });
  });
</script>

...
slideToggle()方法会动态地改变当前元素的高度（其他不变），最终切换到当前元素的可见状态。即如果元素是可见的，则通过滑出效果切换为隐藏状态：如果元素是隐藏的，则通过滑入效果切换为可见状态。
...

<script>
  $(function(){
     $(".secondLi").click(function(){
       $(".secondLi ul").slideToggle(500);
     });
  });
</script>

...

animate()方法

animate()方法可以动态地改变当前元素的各种css属性。
...

jQuery对象.animate(properties,[duration],[fn]);

...
参数properties使用一个“名：值”形式的对象，用于设置需要改变的css属性。
方法只能改变可以取数字值的css属性，如大小属性(width、height)、边框属性(border-width)、外边距属性(margin)、内边距属性(padding)、定位属性(top、left、botton、right)、字体属性(font-size)、文本属性(text-indent、letter-spacing、word-spacing)、背景属性(background-position)和透明度(opacity)。
...

<script>
  $(function(){
      $("img").click(function){
         $(this).animate({"width":"280px","height":280px"},"slow");
      });
  });
</script>

...
通过animate()方法，不仅可以利用动画效果增加元素的长度和宽度，还能够利用动画效果改变元素在页面中的位置。
...

<script>
  $(function(){
    $("img").click(function(){
       $(this).animate({
            "left":"+=100px",
            "top":"+=100px",
            "opacity":"0.5"},3000
       );
    });
  });
</script>

...
根据一些animate()方法执行的先后顺序，可以形成动画“列队”，产生“列队”后，动画的效果便按“队列”的顺序进行展示。
...

<script>
  $(function(){
     $("div").click(function(){//div块单击事件
        $(this).animate({height:100},"slow") //第1列
        .animate({width:100},"slow")//第2列
        .animate({width:50},"slow")//第3列
        .animate({width:50},"slow); //第4列
     });
  });
</script>

...

stop()方法

stop()方法能够结束当前的动画，并立即进入到下一个动画。
...

jQuery对象.stop([clearQueue] [,gotoEnd]);

...
shop()方法的两个参数均为可选参数，且均为布尔类型。
clearQueue参数表示是否清空未执行完的动画队列，gotoEnd参数表示是否立即完成正在执行的动画。
...

<script>
   $(function(){
       $(".secondLi").hover(function(){
            $(".secondLi ul").stop().slideDown(1000);
       },function(){
            $(".secondLi ul").stop().slideup(1000);
       });
   });
</scipt>