如何在jQuery中使用fadein概念

-1

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Untitled Document</title> 
     <script type="text/javascript"> 
      function ShowBoxes() 
      { 
       $("#divTestArea21").fadeIn("fast"); 
       $("#divTestArea22").fadeIn("slow"); 
       $("#divTestArea23").fadeIn(2000); 
      } 
     </script> 
    </head> 
    <body> 
     <div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div> 
     <div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div> 
     <div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div> 
     <input type="button" onClick="ShowBoxes()" value="ShowBox" /> 
    </body> 
</html>

這是我的html。但它不起作用，它沒有顯示任何結果。請給我建議，如果有任何錯誤如何在jQuery中使用fadein概念

來源

2012-07-05 srinu

包括Jqeury腳本！ – 2012-07-05 12:20:08

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
.box, 
button { float:left; margin:5px 10px 5px 0; } 
.box { height:80px; width:80px; background:#090; } 
#log { clear:left; } 

</style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

<button id="btn1">fade out</button> 
<button id="btn2">show</button> 

<div id="log"></div> 

<div id="box1" class="box">linear</div> 
<div id="box2" class="box">swing</div> 

<script> 
$("#btn1").click(function() { 
    function complete() { 
    $("<div/>").text(this.id).appendTo("#log"); 
    } 

    $("#box1").fadeOut(1600, "linear", complete); 
    $("#box2").fadeOut(1600, complete); 
}); 

$("#btn2").click(function() { 
    $("div").show(); 
    $("#log").empty(); 
}); 

</script> 

</body> 
</html>

來源

2012-07-05 12:15:14

添加這頭部分

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

    <script type="text/javascript"> 
      function ShowBoxes() { 
       $("#divTestArea21").fadeIn("fast"); 
       $("#divTestArea22").fadeIn("slow"); 
       $("#divTestArea23").fadeIn(2000); 
      } 
      </script> 

</head> 

<body> 
<div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div> 
     <div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div> 
     <div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div> 
     <input type="button" onClick="ShowBoxes()" value="ShowBox" /> 

</body>

來源

2012-07-05 12:22:35

謝謝你正在工作.. – srinu 2012-07-05 13:51:24

@srinu：標記答案，如果它的權利，所以它有助於其他讀者 – 2012-12-28 10:27:29

如何在jQuery中使用fadein概念

回答

相關問題