JQuery 常用功能

隐藏和显示:

$("#hide").click(function(){ 
  $("p").hide(); //缓慢 $("p").hide(1000);
}); 

$("#show").click(function(){ 
  $("p").show(); 
});

$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle("slow");
  });
});//点击隐藏或者显示

淡入淡出:

$("button").click(function(){ 
  $("#div1").fadeIn(); //淡入  可加参数"slow"、"fast" 或毫秒
});

$("button").click(function(){ 
  $("#div3").fadeOut(3000); //淡入
});

$("button").click(function(){ 
  $("#div2").fadeToggle("slow"); //切换
});


$("button").click(function(){ 
  $("#div1").fadeTo("slow",0.15); //降低透明度
});

元素上下滑动:

$("#flip").click(function(){ 
  $("#panel").slideDown(); 
});//下滑

$("#flip").click(function(){ 
  $("#panel").slideUp(); 
});//上滑

$("#flip").click(function(){ 
  $("#panel").slideToggle(); 
});//下滑或者上滑

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();//停止滑动
  });
});

自定义动画:

<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});
</script> 

切换class:

$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
  });
});