Question

<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。但它不起作用它没有显示任何结果。如果有任何错误，请建议我

Answer 1

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

Answer 2

在头部添加此内容

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

如何在JQuery中使用fadein概念

2 个答案: