标签:
5.fadeIn() fadeOut() fadeToggle() fadeTo()
fadeIn():用于淡入已隐藏的元素。
fadeOut( ) :方法用于淡出可见元素。
fadeToggle( ) :方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
fadeTo( ) :方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
重点:在搞这几个方法时,我想到了另一对方法hide()show()。hide隐藏起来的内容能否被“淡入”,被“淡出”的内容能否被“淡入”。为了方便,我拿fadeToggle方法和show,hide进行试验。发现,他们之间能相互作用!这个发现让我有点小兴奋,附上试验代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.2.1.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".btn1").click(function()
{
$(".test").hide("slow");
});
$(".btn2").click(function(){
$(".test").fadeToggle("slow");
});
$(".btn3").click(function(){
$(".test").show("slow");
})
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a para</p>
<p>This is another</p>
<button type="button" class="btn1">Click me to hide</button>
<button type="button" class="btn3">Click me to show</button>
<button type="button" class="btn2">fadeToggle </button>
</body>
</html>
标签:
原文地址:http://www.cnblogs.com/yns-blogs/p/5261523.html