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

Question

[Вячеслав Мулюкин]

.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)"})

Comments

[Вячеслав Мулюкин]

если использовать css({transform:"rotate(270deg)"}) то все работает

Answer 1

[Валентин Дубровский]

Пожалуй, отвечу на ваш вопрос, а не буду советовать как правильно делать:) animate работает только с числовыми значениями. Вот выдержка из русской доки: "Поддерживаются только свойства, имеющие в качестве значения какие-либо числа (или же значения «hide», «show» и «toggle»)"

Answer 2

[Maxim Zhgulev]

.oblako {
    transition: all 0.2s ease;
}
.oblako.alt {
    transform: rotate(270deg);
}

$(".oblako").addClass("alt");

Answer 3

[Хазрат Гаджикеримов]

Задавайте всю логику в 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');
});