Question

＆＃13;

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

＆＃13;

我正在处理一本书，在书中我正在学习jquery的slideDown / Up方法。我最初在我的主网页上运行了代码，但它不起作用。所以我刚刚创建了一个简单的YES.html（见上图），以确保我正确编码。但是它不会向上或向下滑动图像。我不知道我为此工作缺少了什么。我是初学者，所以我可能会错过一些简单的东西。如果可能的话，请逐步解释您的答案/解决方案，或者引导我进入某种类型的网页教程。感谢。

Answer 1

你正在寻找这样的东西吗？

$('#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 2

你没有导入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 3

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

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

我也改变了＆＃34; onclick＆＃34;代码：

＆＃13;

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

＆＃13;

        img#dramatic { display: none; }

＆＃13;

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

＆＃13;

方法slideDown / slideUp上的jQuery帮助无法使其工作

3 个答案: