Блог

Главная - Вопросы по программированию - анимация флага jQuery при нажатии

анимация флага jQuery при нажатии

#jquery #position

#jquery #положение

Вопрос:

Я пытаюсь создать программу, в которой рядом с полюсом есть флаг. Он начинается в нижней части полюса, и когда пользователь нажимает на него, он перемещается к вершине полюса. Когда он находится вверху, если пользователь нажимает на него снова, он перемещается вниз. Итак, я пытаюсь создать этот эффект флага. Но прямо сейчас с тем, что у меня есть, работает первая часть, где она движется вверх. Но движущаяся вниз часть — нет. Кто-нибудь может помочь? Спасибо.

 <!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 amp;amp; 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 amp;amp; reachedBottom == false){
            $("#flag").click(function(){
                $("#flag").animate({top: $(document).height()/3});
                if ($("#flag").position().top == $(document).height()/3){
                    reachedTop = false;
                    reachedBottom = true;
                }
            });
        }
    </script>
</body>

Ответ №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>