jQuery 帮助方法 slideDown/slideUp 不能让它工作

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
    <head>
        <title>YES</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
    </head>
    
    <body>
        
        
        
        <img id="dramatic" src="statefair.jpg" width="400px" height="400px">
        <br>
        <button id="make_visible">HIDE</button>
        
        
        <style>
            img#dramatic {
            display: none;
            }
        </style>
        
        
        <script>
        
        $("button#make_visible").on("click", function() {
      $("img#dramatic").slideDown();
        });
        
        </script>
</body>
</html>

我正在研究一本书，在书中我正在学习 jquery 的 slideDown/Up 方法。我运行代码最初在我的主页上，但它不起作用。所以我只是创建了一个简单的 YES.html（见上文）以确保我正确编码。但是它不会向上或向下滑动图像。我不知道我缺少什么才能正常工作。我是初学者，所以我可能会遗漏一些简单的东西。如果可能，请逐步解释您的 answer/solution，或者指导我访问某种网页教程。谢谢

Answer 1

您没有导入 jQuery，要使用 jQuery UI，您必须先导入 jQuery。认为这有帮助：

        <!DOCTYPE html>
        <html>
        <head>
            <title>YES</title>
            <script
                  src="https://code.jquery.com/jquery-3.2.1.js"
                  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
                  crossorigin="anonymous"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
        </head>

        <body>



            <img id="dramatic" src="statefair.jpg" width="400px" height="400px">
            <br>
            <button id="make_visible">HIDE</button>


            <style>
                img#dramatic {
                display: none;
                }
            </style>


            <script>

            $("button#make_visible").on("click", function() {
          $("img#dramatic").slideDown();
            });

            </script>
    </body>
</html>

Answer 2

你在找这样的东西吗？

$('#make_visible').on('click', function (e) {
  /* method 1 */
  /*if ($('#dramatic').css('display') === 'none') {
    $('#dramatic').slideDown();
    $(this).html('Hide');
  }
  else {
    $('#dramatic').slideUp();
    $(this).html('show');
  }*/
  /* method 2 */
  $('#dramatic').slideToggle();
  this.innerHTML = this.innerHTML == 'HIDE' ? 'SHOW' : 'HIDE';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="make_visible">HIDE</button>
<br />
<img id="dramatic" src="statefair.jpg" width="400px" height="400px" />

Answer 3

jQquery UI 需要 jQuery 才能运行，因此您应该首先包含它。我使用 jQuery 1.3.2，因为它似乎最适合 jQuery UI 1.8。

这本书可能有点过时，因为最新版本是 1.12。

我还稍微更改了 "onclick" 代码：

$( "button#make_visible" ).click(function() {
   $("img#dramatic").slideDown();
});

        img#dramatic { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<body>
<img id="dramatic" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Wisconsin_State_Fair.jpg" width="400px" height="400px">
    <br>
    <button id="make_visible">HIDE</button>

</body>

jQuery 帮助方法 slideDown/slideUp 不能让它工作

jQuery help on method slideDown/slideUp can't get it to work

javascript

jquery

image

web

slidedown