jQuery来了--效果--隐藏和显示,淡入淡出，滑动

隐藏和显示

hide()和show()

hide()作用：隐藏HTML元素
（相当于CSS中 display:none;）

show()作用：显示HTML元素
（相当于CSS中 display:block;）

语法：
隐藏：$("selector").hide(speed,callback);
显示：$("selector").show(speed,callback);

参数speed：可选值，规定隐藏/显示的速度。可以取值：“slow”,”fast”或毫秒

参数callback：可选值，隐藏或显示完成后所执行的函数名称

例.

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>

<button>隐藏</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>

toggle()

作用：切换hide()和show()方法。显示被隐藏的元素，并隐藏已显示的元素

语法：$(“selector”).toggle(speed,callback);

例.

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>

淡入淡出

四种fade方法：

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

fadeIn()方法

作用：淡入已隐藏的元素

语法：$(“selector”).fadeIn(speed,callback);

例.

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>

<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

fadeOut()方法

作用：淡出可见元素

语法：$(“selector”).fadeOut(speed,callback);

例.

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>

<button>点击淡出 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

fadeToggle()方法

作用：切换fadeIn()和fadeOut()方法

如果元素已淡出，则fadeToggle()会向元素添加淡入效果
如果元素已淡入，则fadeToggle()会向元素添加淡出效果

语法：$(“selector”).fadeToggle(speed,callback);

例.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeOut();
        $("#div2").fadeOut("slow");
        $("#div3").fadeOut(3000);
    });
});
</script>

<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

fadeTo()方法

作用：渐变为给定的不透明度（值介于0和1之间）

语法：$(“selector”).fadeTo(speed,opacity,callback);

参数 opacity：将淡入淡出效果设置为给定的不透明度（值介于0和1之间）

例.

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
</script>

<button>点我让颜色变淡</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

滑动

3种滑动方法：

• slideDown()
• slideUp()
• slideToggle()

slideDown()方法

作用：用于向下滑动元素

语法：$(“selector”).slideDown(speed,callback);

例.

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>

<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

slideUp()方法

作用：用于向上滑动元素

语法：$(“selector”).slideUp(speed,callback);

例.

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>

<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

slideToggle()方法

作用：在slideDown()和slideUp()方法之间切换

语法：$(“selector”).slideToggle(speed,callback);

例.

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>

<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>