jQuery 效果學習

<script type="text/javascript">
  //隱藏第二個段落，點擊more顯示一個效果
  $(document).ready(function(){
    $('p:eq(1)').hide();
    $('span.more').click(function(){
      $('p:eq(1)').animate({height:"show", width:"show", opacity:"show"},'slow');
      $(this).hide();
    });
    
    //隱藏最后段落，點擊倒數(shù)第二段落，顯示最后一個段落隱藏倒數(shù)第二段落 移動效果
    $('p:last').css('backgroundColor','#fcf').hide();
    $('p:eq(2)').css('backgroundColor','#cff').click(function(){
      var $thisPara = $(this);
      $thisPara.next().slideDown('slow', function(){
         $thisPara.slideUp('slow');
      });
    })
    
    //按鈕向左運動
    $('div.label').click(function(){
      //計算left距離
      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 rightSide = paraWidth - totalButtonWidth;
      $('div.button').animate({'left':rightSide, height: 20}, 'slow')
    });
    //按鈕向右運動    淡入淺出效果
    $('h3').click(function(){
      $('div.button')
      .fadeTo('slow',0.4)
      .animate({'left':650},'slow')
      .fadeTo('slow',1.0)
      .slideUp('slow');
    });
    
    //改變段落字體大小
    $('div.button').click(function(){
      //獲取對象保存變量中
      var $speech = $('div.speech');
      var currentSize = $speech.css('fontSize');//獲取樣式屬性的值
      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);
    });
    
    
    //鼠標滑過變色 使用hover方法  
    $('h3, div.label, div.button, span.more').hover(function(){
      $(this).addClass('hover');
    }, function(){
      $(this).removeClass('hover');
    });
  });
</script>
<style type="text/css">
.hover {
  cursor: pointer;
  background: #ffc;
}
</style>