SlavaGlaps
@SlavaGlaps
Программист

Почему не срабатывает анимация?

.oblako{
position:absolute;
top:1350px;
left:1000px;
border-radius:40%;
background:url("/clicker/image/oblako1.png") no-repeat;  
width:1000px;
height:300px;
transform:rotate(0deg);
z-index:1;
}


$clicker.animate({transform:"rotate(270deg)"})
  • Вопрос задан
  • 128 просмотров
Решения вопроса 1
matroskin13
@matroskin13
JavaScript developer, GO developer
Пожалуй, отвечу на ваш вопрос, а не буду советовать как правильно делать:) animate работает только с числовыми значениями. Вот выдержка из русской доки: "Поддерживаются только свойства, имеющие в качестве значения какие-либо числа (или же значения «hide», «show» и «toggle»)"
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
e_s_l
@e_s_l
Full-stack web developer
.oblako {
    transition: all 0.2s ease;
}
.oblako.alt {
    transform: rotate(270deg);
}


$(".oblako").addClass("alt");
Ответ написан
Комментировать
Задавайте всю логику в CSS, а в JS устанавливайте необходимые классы при опр. событии.

.oblako {
    position:absolute;
    top:1350px;
    left:1000px;
    border-radius:40%;
    background:url("/clicker/image/oblako1.png") no-repeat;  
    width:1000px;
    height:300px;
    transform:rotate(0deg);
    z-index:1;
   transition: all 0.6s ease;
}

.oblako__active {
  transform:rotate(270deg);
}


JS
$('.oblako').click(function (){
   $(this).addClass('oblako__active');
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы