С помощью фронта на хлеб не зарабатываю. Но возникла необходимость анимации изображения. С помощью 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>