1. 程式人生 > >十分鐘玩轉 jQuery、例項大全

十分鐘玩轉 jQuery、例項大全

複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
      <div id="id2" style="display:none; width: 80px;height: 80px;background-color: orangered "></div>
      <div id="id3" style="display:none; width: 80px;height: 80px;background-color: darkgreen "></div>

    <script src="../../jquery-1.12.4.js"></script>
    <script>
        $(document).ready(
function(){ $("#in").click(function(){ $("#id1").fadeIn(1000); $("#id2").fadeIn(1000); $("#id3").fadeIn(1000); }); $("#out").click(function(){ $("#id1").fadeOut(1000); $("#id2").fadeOut(1000); $(
"#id3").fadeOut(1000); }); $("#toggle").click(function(){ $("#id1").fadeToggle(1000); $("#id2").fadeToggle(1000); $("#id3").fadeToggle(1000); }); $("#fadeto").click(function(){ $("#id1").fadeTo(1000,0.4); $(
"#id2").fadeTo(1000,0.5); $("#id3").fadeTo(1000,0); }); }); </script> </body> </html>
複製程式碼