Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animations</title>


    <link rel="stylesheet" type="text/css" href="css/animate.css">

    <script src="js/jquery.js"></script>

    <script type="text/javascript">


      $(document).ready(function(){

            $(".box").on("click", function(){

              $(".container").addClass("animated rollIn");
             //$(".container").addClass("rollIn"); we have the same result


            });



            $("#join_us button").on("click", function(){

              $(this).addClass("animated shake");

            });


        });

    </script>
</head>

当我单击html页面的框和按钮时，为什么这两个函数仅在第一次（仅一次）执行时才执行？你有什么解决方案吗？我在这里搜索了很多主题，但我没有设法解决问题。

P.s：抱歉任何错误，这是我第一次发布主题。

Answer 1

尝试使用此功能，在setTimeout

中添加类

<div class="container">DIV 1</div>
<button class="box">Roll In</button>
<div id="join_us">
  <button>Shake It</button>
</div>

<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $(".box").on("click", function(){
        $(".container").removeClass("animated rollIn");
        setTimeout(function(){
          $(".container").addClass("animated rollIn");
        },1);
    });
    $("#join_us button").on("click", function(){
      var button = $(this);
       button.removeClass("animated shake");
        setTimeout(function(){
          button.addClass("animated shake");
        },1);
    });
  });
</script>

我的脚本只运行一次，我想无限次地重新加载html页面

1 个答案: