Jquery 样式和效果

// 点击...显示更多内容
$(document).ready(function() {
  $('p:eq(1)').hide();
  $('span.more').click(function(){
    // show和hide会同时修改高度和不透明度。
    $('p:eq(1)').show('show');
    $(this).hide();
  });
});

// 放大缩小文字
$(document).ready(function() {
  $('div.button').click(function(){
    var $speech = $('div.speech');
    var currentSize = $speech.css('fontSize');
    var num = parseFloat(currentSize);
    // 截取currentSize的最后两位。
    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);
  });
});

// button移动的效果
$(document).ready(function() {
  $('div.label').click(function() {
    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 borderLeftWidth = $button.css('borderLeftWidth');
    var borderRightWidth = $button.css('borderRightWidth');
    var totalButtonWidth = parseInt(buttonWidth, 10) + parseInt(paddingLeft, 10) + parseInt(paddingRight, 10) + parseInt(borderLeftWidth, 10) + parseInt(borderRightWidth, 10);
    var rightSide = paraWidth - totalButtonWidth;

    // 四个参数：1 包含样式属性及值的映射
    //          2 可选的速度参数
    //          3 可选的缓动(easing)
    //          4 可选的回调函数
    $button.animate({'left':rightSide, height:38}, 'slow');
  });
});

// 并发和排队效果，处理一组元素
// 排队不适于非效果方法，不如css();
$(document).ready(function() {
  $('h2').click(function(){
    $('div.button')
    .fadeTo('slow', 0.5)
    .animate({left:650}, 'slow')
    .fadeTo('slow', 1.0)
    .slideUp('slow');
  });
});

// 并发和排队效果，处理多组元素
$(document).ready(function() {
  $('p:eq(3)').css('backgroundColor', '#fcf').hide();
  $('p:eq(2)').css('backgroundColor', '#cff').click(function() {
    // 这样写，第2段消失和第3段出现，是同时进行的
    //$(this).slideUp('slow').next().slideDown('slow');
    // 通过回调方法，实现排队效果
    var $thisPara = $(this);
    $thisPara.next().slideDown('slow', function(){
      $thisPara.slideUp('slow');
    });
  });
});

// Make clickable elements appear so on hover.
$(document).ready(function() {
  $('h2, div.button, div.label, span.more, p:eq(2)').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });
});