jQuery animate не уменьшает

Question

С помощью фронта на хлеб не зарабатываю. Но возникла необходимость анимации изображения. С помощью jQuery хочу сделать следующее. По клику на фото - увеличение. Второй клик - возврат до начальных размеров. Решил делать с помощью сравнения и добавления атрибутов. В частности alt. На увеличение всё работает. Значение атрибута меняется с small на big. Почему не срабатывает уменьшение, т.е. не срабатывает else. Вместо этого идет опять увеличение, т.е. ветка if? Как решить проблему?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Styles</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        function IncreseImage () {
            $("#img").animate({
                    width: $("#img").width() * 5,
                    height: $("#img").height() * 5,
                }, 3000);
        }
        function DecreseImage () {
            $("#img").animate({
                    width: $("#img").width(),
                    height: $("#img").height(),
                }, 3000);
            $("#img").attr("alt", "small");
        }
        $(document).ready(function () {

                $("#img").parent().css("text-align", "center");
                var ch = $('#img').attr("alt");
                if (ch === "small") {
                    $(document).on("click", '#img', IncreseImage);
                    $("#img").attr("alt", "big");
                } else {
                    $(document).on("click", '#img', DecreseImage);
                    $("#img").attr("alt", "small");
                }
            });

    </script>
</head>
<body>
    <p>
        <img src="https://1.bp.blogspot.com/-KZa6XktH5xY/WlHX117BB9I/AAAAAAAAKCo/q3VklH3TClQaW0ur5ke6Cm-8MJMX3eXRACEwYBhgL/s320/1485549014271.jpg" title="Изображение" alt="small" id="img" width="200">
    </p>
</body>
</html>

Answer 1

Можно не заморачиваться со сменой атрибута, а просто установить какой-нибудь абстрактный флаг, менять его значение и проверять. И обратите внимание - чтобы картинка уменьшалась, надо делить высоту и ширину на 5 (т.е. совершать обратное умножению действие).

let flag = false;
$('#img').on('click',function(){
  if(flag == false) {
    flag = true;
    $("#img").animate({
      width: $("#img").width() * 5,
      height: $("#img").height() * 5,
    }, 3000);
  }
  else {
    flag = false;
    $("#img").animate({
      width: $("#img").width() / 5,
      height: $("#img").height() / 5,
    }, 3000);
  }
})

#img {
  display: block;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://i.pinimg.com/originals/f2/32/0c/f2320c17d0121e82c0228a2177ff9718.jpg" alt="small" id="img" width="300">

БЛОГ НА HUSL

jQuery animate не уменьшает

Ответы (1 шт):