jQuery效果

效果

基本

hide 隐藏显示的元素

'hide( speed, [callback] )' 的无动画版

隐藏所有段落

$("p").hide()

用600毫秒(慢) / 200毫秒(快) 的时间将段落缓慢的隐藏

$("p").hide("slow / fast");  

用将段落迅速隐藏，之后弹出一个对话框。

$("p").hide("fast",function(){
   alert("Animation Done.");
 });

 

show 显示隐藏

如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

1.显示所有段落

<p style="display: none">Hello</p>
$("p").show()

 

2.用缓慢 / 迅速 的动画将隐藏的段落显示出来，历时600毫秒。

$("p").show("slow / fast");

 

3.用迅速的动画将隐藏的段落用将近4秒显示出来。并在之后执行反馈！

$("p").show(4000,function(){
   $(this).text("反馈");
 });
 

 

toggle

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

$('button').on('click', function () {
    $('div').hide()//隐藏
    $('div').toggle()//默认有,点后没,再点又有
}

 

switch参数描述:

如果这个参数为true ，那么匹配的元素将显示;如果false ，元素是隐藏的

$('#foo').toggle(showOrHide);
//相当于
if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}      
 

 

滑动

slideDown 展开 / slideUp 收回

通过调整高度实现展开效果

以滑动方式显示隐藏的 <p> 元素：

$(".btn2").click(function(){
  $("p").slideDown();
});
​
$("p").slideDown("slow / fast");
​
$("p").slideDown("fast",function(){
   alert("Animation Done.");
 });

 

slideToggle 展收可切换

$('button').on('click',function () {
    $('div').fadeToggle()
})
 

 

fadeIn 淡入 fadeOut 淡出

$("p").fadeIn/fadeOut ("slow");
("p").fadeIn/fadeOut ("fast/slow"/3000,function(){
   alert("Animation Done.");
 });

 

fadeTo 渐进

fadeToggle 入出可切换