jQuery圖片顯示消失和切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      #box{
          display: none;
      }
    </style>
    <script src="jquery-1.11.3.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            $('.dis').click(function () {
                $('#box').show(200);//顯示出來的時間
            })
            $('.hide').click(function () {
                $('#box').hide(200);//顯示出來的時間
            })
            $('.toggle').click(function () {
                $('#box').toggle(200);//顯示出來的時間
            })

        })
    </script>
</head>
<body>
<button class="dis">顯示</button>
<button class="hide">隱藏</button>
<button class="toggle">切換</button>
<br/>
<img src="2.jpg" id="box"/>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章