赵工的个人空间

让Web页面上的元素出现和消失，是常见的JavaScript任务。下拉式导航菜单、弹出式工具提示和自动幻灯片播放，都依赖于按照意愿显示和隐藏元素的能力。借助jQuery，还可以实现渐入渐出以及滑动元素这样的效果。

1. 显示、隐藏和切换：

.show()和.hide()函数分别显示和隐藏页面中的元素，这些函数设置CSS的display属性。要想隐藏一个元素，就将display属性设置为none。示例：
$(document).ready(function(){
   $('#option1').click(function(){
      $('#option1').hide();
   });
   $('#option2').click(function(){
      $('#option2').hide();
   });
});
还有一种更好的解决办法：
$(document).ready(function(){
   $('.removeBtn').each(function(elm){
      $(this).click(function(){
         $(this).parent().hide();
   });
 });
});
上述代码，将一个函数应用于removeBtn类的每一个元素，为这个元素上设置click事件，其中调用.hide()函数，找到父节点。
.toggle()函数根据元素的当前状态显示或隐藏它。所有三个函数.show()、.hide()和..toggle()接受两个参数，一个期限和一个回调函数。为函数增加一个期限将导致以特定的速率隐藏或显示，ms为单位，也可以使用字符串fast、normal、slow，分别代表200ms、400ms、600ms。
回调函数在对该元素显示或隐藏之后执行一个动作，其中一个应用是在隐藏元素后显示一个Undo按钮，使得用户能够重新显示刚刚隐藏的元素。示例：
$(document).ready(function(){
   $('.removeBtn').each(function(elm){
      $(this).click(function(){
         $(this).parent().hide(500);
   });
 });
});
通常，当隐藏Web页面上一个元素时，其他元素会移动过来填充这一空白；同样，让一个元素出现，会迫使其他内容为新显示的元素腾出位置。为了避免页面上的内容跳来跳去，可以使用CSS和绝对定位。

2. 渐入渐出：

为.show()、.hide()和..toggle()函数添加一个期限改变了它们的不透明度直到它们可见或隐藏。相似的功能可以通过.fadeIn()、.fadeOut()和.fadeToggle()函数实现。示例：
$('element').fadeOut('slow');
$('element').fadeOut('10000');
.fadeTo()函数，把图像淡化到一定的透明度，需要提供一个表示元素透明度的值。示例：
$('p').fadeTo('normal',.75);
淡化到0，元素就不可见了，但页面上占据的空间仍然保留。

3. 滑动：

将display属性设置为none的另外一种方法是通过.slideUp()和.slideDown()函数，这些函数产生了一个滑动效果，使得元素在消失之前移动或者出现之前移动。使用.slideUp()函数使得元素消失，使用.slideDown()函数使得元素重现。示例：
$('.removeBtn').each(function(elm){
   $(this).click(function(){
      $(this).parent().slideUp();
   });
});

4. 动画：

.animate()函数，允许对任何CSS属性动画，接收像素、em和百分比参数。例如，可以对文本大小、页面上元素的位置、对象的透明度或者边框的宽度设计动画。jQuery不能对颜色动画，可以使用jQuery Color插件来实现。示例：
$('#message').animate (
{
  left:'650px',
  opacity:.5,
  fontSize:'24px'
},1500);
上述代码，将id为message的元素从页面左边界移动650像素，透明度改为50%，字体改为24像素。
.animate()函数可以接收2个参数，第一个是对象直接量，其中包括了元素的CSS属性；第2个参数是动画的时间长度，以ms为单位。为了使用CSS的left、right、top或bottom属性对元素的位置实现动画，必须把元素的CSS的position属性设置为absolute或relative。
对象直接量很像一段CSS数据，但每一项是以逗号分隔，而且属性值一般需要加引号按字符串处理，纯数字可以不加引号。属性可以用引号或不用引号，但不用引号时，里面不能有连字符-，需要转换格式。示例：
{
  'font-size':'24px',
  'bord-left-width':'2%'
},
可以使用+=或-=作为动画选项的一部分，从而根据属性的当前值来设置它。示例：
$('#moveIt').click (function(){
  $('this').animate (
  {
    left:'+=50px',
  },
  1000);
});
不能直接对边框宽度实现动画，因为这个属性是缩写形式，只能对每个边框使用全名：
$('#element').animate (
{
  borderTop:'20px',
  borderRight:'20px',
  borderBottom:'20px',
  borderLeft:'20px',
},1000);

5.缓动：

jQuery函数的.slideUp()、.fadeIn()、.animation()等函数还接收一个控制动画过程速度的参数，缓动easing。jQuery只包含了两个缓动方法，swing和linear，其中linear提供了一个稳定的动画，使得的每个步骤都是相同的；swing要更加动态，随着动画的开始变得更加快一些，然后慢下来，是默认设置。示例：
$('#element').slideUp(1000,'linear');
$('#message').animate (
{
  left:'650px',
  opacity:.5,
  fontSize:'24px'
},1500,'linear');
可以使用jQuery easing插件，可以以更加生动的方式实现动画。

6.动画完成后执行一个操作：

可以给任何效果传递给一个回调函数，这是只有在效果完成的时候才运行的一个函数。对于大多数效果，回调函数作为第2个参数传递，对于fadeTo()函数是第3个参数。示例：
$('#photo').fadeIn(1000,function(){
   $(#caption).fadein(1000);
});
上述代码在照片淡入视线后显示一个标题。当然，想要在页面载入的时候运行函数，应该先隐藏照片和标题，然后执行fadein效果。
$('#photo').width(0).height(0).css('opacity',0);
$('#caption').hide();
$('#photo').animate(
   {
      width:'200px',
      height:'100px',
      opacity:1
   },1000,
   function() {
      $('#caption').fadeIn(1000);
   }
);  //end animate
上述代码第1行，将照片的width、height和opacity设置为0，将照片隐藏了起来；第2行隐藏了标题；后面是动画函数。
如果要实现几个元素的动画，需要给回调函数传递一个回调函数：
$('#photo').animate(
   {
      left:'+=400px',
   },1000,
   function() {
      $('#caption').fadeIn(1000,
         function() {
            $('#photo,#caption').fadeOut(1000);
         }
      ); //end fadeIn
   }//end first callback function
);  //end animate
上述代码让一个图像移动到屏幕中央，然后一个标题淡入视线，然后图像和标题都淡出视线。
可以使用函数串联技术，实现一幅照片淡入、淡出，然后再次淡入：
$('#photo').fadeIn(1000).fadeOut(2000).fadeIn(250);
在对一个元素上的效果排队时，可以使用delay()函数，指定队列下一个效果前等待的ms数。示例：
$('#photo').fadeIn(1000).delay(10000).fadeIn(250);
.stop()函数在开始一个新的动画之前直接结束其上的任何动画。示例：
$(this).stop().animate();