无盐之地 2022-11-13 23:37 采纳率: 77.8%
浏览 27

jquery动画click没有反应

问题遇到的现象和发生背景

代码别人运行没有问题,我自己运行不知道为什么click毫无反应,不知道哪里有问题。
是在这之前需要做什么配置才会出现动画的效果吗?

用代码块功能插入代码,请勿粘贴截图
<!DOCTYPE html>
<html>

<head>
    <title>Showing and Hiding Elements</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src= "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <script type="text/javascript">
        $(function() {
            $("#show").click(function() {
                $("#theDiv").show(2000,"swing",function(){
                $(this).text("hello")
                $("#theDiv").hide(1000,function(){
                    $("#theDiv").show(1000,function(){
                        $(this).text("Hello")
                    })
                })
            })
            });
            $("#hide").click(function() {
                $("#theDiv").hide(200,function(){
                    $(".abc").text("hide")
                })
            });
            $("#toggle").click(function() {
                $("#theDiv").toggle("slow",completion);
               
            });
        });
       function completion(){
        $(this).text("Animation complete");}
    </script>
    <style type="text/css">
        p,
        span {
            font-size: 16pt;
        }
        
        button {
            margin: 5pt 5pt 0 0;
        }
    </style>
</head>

<body>
    <h1>Using the show and hide effects</h1>
    <div id="content">

        <p>How r u.</p>
        <ul>
            <li><code>show()</code>: Reveals the matched elements using an optional animation</li>
            <li><code>hide()</code>: Hides the matched elements using an optional animation</li>
            <li><code>toggle()</code>: Toggles the visible state of the matched elements using an optional animation</li>
        </ul>
        <div id="theDiv" class="box">
        </div>
        <button id="show">Show</button>
        <button id="hide">Hide</button>
        <button id="toggle">Toggle</button>
    </div>
    <div class="abc">abc</div>
</body>

</html>

运行结果及报错内容

img

我想要达到的结果

成功做出动画效果,可以hide也可以show

  • 写回答

2条回答 默认 最新

  • 黛琳ghz 2022年度博客之星前端领域TOP 8 2022-11-14 02:29
    关注

    复制你的代码然后看了下,报错如下,错误原因你要引入jQuery包啊!你这个引入的ui包,应该加上这行代码
    补充:第一行报错是因为我这里没你的css文件,所以没有样式

      <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    

    img

    完整代码如下

    <!DOCTYPE html>
    <html>
    
    <head>
      <title>Showing and Hiding Elements</title>
      <link rel="stylesheet" href="style.css" />
      <!-- <script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> -->
      <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
      <script type="text/javascript">
        $(function () {
          $("#show").click(function () {
            $("#theDiv").show(2000, "swing", function () {
              $(this).text("hello")
              $("#theDiv").hide(1000, function () {
                $("#theDiv").show(1000, function () {
                  $(this).text("Hello")
                })
              })
            })
          });
          $("#hide").click(function () {
            $("#theDiv").hide(200, function () {
              $(".abc").text("hide")
            })
          });
          $("#toggle").click(function () {
            $("#theDiv").toggle("slow", completion);
    
          });
        });
    
        function completion() {
          $(this).text("Animation complete");
        }
      </script>
      <style type="text/css">
        p,
        span {
          font-size: 16pt;
        }
    
        button {
          margin: 5pt 5pt 0 0;
        }
      </style>
    </head>
    
    <body>
      <h1>Using the show and hide effects</h1>
      <div id="content">
    
        <p>How r u.</p>
        <ul>
          <li><code>show()</code>: Reveals the matched elements using an optional animation</li>
          <li><code>hide()</code>: Hides the matched elements using an optional animation</li>
          <li><code>toggle()</code>: Toggles the visible state of the matched elements using an optional animation</li>
        </ul>
        <div id="theDiv" class="box">
        </div>
        <button id="show">Show</button>
        <button id="hide">Hide</button>
        <button id="toggle">Toggle</button>
      </div>
      <div class="abc">abc</div>
    </body>
    
    </html>
    
    
    评论

报告相同问题?

问题事件

  • 创建了问题 11月13日

悬赏问题

  • ¥100 三相直流充电模块对数字电源芯片在物理上它必须具备哪些功能和性能?
  • ¥30 数字电源对DSP芯片的具体要求
  • ¥20 antv g6 折线边如何变为钝角
  • ¥30 如何在Matlab或Python中 设置饼图的高度
  • ¥15 nginx中的CORS策略应该如何配置
  • ¥30 信号与系统实验:采样定理分析
  • ¥100 我想找人帮我写Python 的股票分析代码,有意请加mathtao
  • ¥20 Vite 打包的 Vue3 组件库,图标无法显示
  • ¥15 php 同步电商平台多个店铺增量订单和订单状态
  • ¥17 pro*C预编译“闪回查询”报错SCN不能识别