用jQuery 实现元素的淡入淡出效果。

jQuery拥有四种fade方法

fadeIn() 实现隐藏元素的淡入效果的,代码如下:

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("div1").fadeIn();

$("div2").fadeIn("slow");

$("div3").fadeIn(1000);

});

});

</script>

</head>



<body>

<p>演示带有不同参数的 fadeIn() 方法。</p>

<button>点击这里,使三个矩形淡入</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>

 

fadeOut() 实现可见元素的淡出效果,代码如下:

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("div1").fadeOut();

$("div2").fadeOut("slow");

$("div3").fadeOut(1000);

});

});

</script>



</head>

<body>

<p>演示带有不同参数的 fadeOut() 方法。</p>

<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>

</body>



</html>

 

fadeTogger() 在fadeIn()方法和fadeOut()方法之间切换,如果元素已淡出,fadeTogger()会向元素中插入淡入效果,如果元素已淡入,fadeTogger会向元素插入淡出效果

代码如下:

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("div1").fadeToggle(1000);

$("div2").fadeToggle(1000);

$("div3").fadeToggle(1000);

});

});

</script>

</head>





<body>



<p>演示带有不同参数的 fadeToggle() 方法。</p>

<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>

</body>



</body>

</html>

 

fadeTo()方法允许渐变为给定的不透明度,代码如下:

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("div1").fadeTo(1000,0.2);

$("div2").fadeTo("slow",0.3);

$("div3").fadeTo(2000,0.7);





});

});

</script>

</head>



<body>



<p>演示带有不同参数的 fadeTo() 方法。</p>

<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>



</body>

</html>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").fadeTo("slow",0.15);

    $("#div2").fadeTo("slow",0.4);

    $("#div3").fadeTo("slow",0.7);

  });

});

</script>

 

你可能感兴趣的:(jquery)