jQuery 点击时标记动画

Question

我正在尝试制作一个在杆子旁边有一面旗帜的程序。它从杆的底部开始，当用户单击它时，它会移动到杆的顶部。当它在顶部时，如果用户再次点击它，它会移动到底部。所以我正在尝试制作那个标志效果。但是现在，第一部分正在工作，它向上移动。但是向下移动的部分不是。有人可以帮忙吗？谢谢

<!DOCTYPE html>
<html>
    <head>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">. 
        </script>
   </head>
  <body>
       <img src = "https://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Us_flag_large_38_stars.png/1200px-Us_flag_large_38_stars.png" id = "flag" width = "200px" height = "140px">
       <div id = "pole"></div>
    
     <script>
        //booleans
        var reachedTop = false;
        var reachedBottom = true;
        
        //initial positioning
        $("#pole").width(10);
        $("#pole").height($(document).height());
        $("#pole").css("background-color", "gray");
        $("#pole").css({left: $(document).width() * 5/12});
        $("#pole").css("position", "absolute");
        
        $("#flag").css("position", "absolute");
        $("#flag").css({left: $("#pole").position().left, top: $(document).height()/3});
        
        //animations on clicks
        if (reachedBottom && reachedTop == false){
            $("#flag").click(function(){
              
                $("#flag").animate({top: $("#pole").position().top});
                if ($("#flag").position().top == $("#pole").position().top){
                    reachedTop = true;
                    reachedBottom = false;
                }
            });
        } else if (reachedTop && reachedBottom == false){
            $("#flag").click(function(){
                $("#flag").animate({top: $(document).height()/3});
                if ($("#flag").position().top == $(document).height()/3){
                    reachedTop = false;
                    reachedBottom = true;
                }
            });
        }
    </script>
</body>

Answer 1

我实际上会使用 CSS 并使用 JavaScript，只是为了更新类，留下 CSS 来控制动画。

$(function () {
  $(".pole").click(function () {
    $(this).toggleClass("top");
  });
});

.pole {
  height: 500px;
  width: 5px;
  background-color: #000;
  position: relative;
}
.pole img {
  position: absolute;
  width: 150px;
  left: 5px;
  top: 100px;
  transition: top 0.25s linear;
}
.pole.top img {
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pole">
  <img src="https://i.imgur.com/P87H5O6.png" alt="Flag" class="flag" />
</div>

jQuery 点击时标记动画

jQuery flag animation on click

jquery

position