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();
    });
    
    //隐藏最后段落，点击倒数第二段落，显示最后一个段落隐藏倒数第二段落 移动效果
    $('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>