jquery常用效果

$(document).ready(function(){
  $("#fadeInButton").click(function(){
    $("#box").fadeIn(1000);
  });
  $("#fadeOutButton").click(function(){
    $("#box").fadeOut(1000);
  });
});

$(document).ready(function(){
  $("#slideDownButton").click(function(){
    $("#box").slideDown(1000);
  });
  $("#slideUpButton").click(function(){
    $("#box").slideUp(1000);
  });
});

$(document).ready(function(){
  $("#animateButton").click(function(){
    $("#box").animate({
      width: '200px',
      height: '200px',
      opacity: 0.5
    }, 1000, function(){
      alert('动画完成！');
    });
  });
});