Как мне поворачивать объект, а затем исчезать в jquery?

Question

Я работаю над созданием мобильной кнопки меню, и я хочу, чтобы она вращалась на 90 градусов, а затем исчезала, но я не могу понять, как заставить ее работать.

Я попытался использовать .animate() для вращения, а затем обратный вызов, который использовал hide(), но это не сработало.

Мой последний код выглядит следующим образом:

$('.menuButton').click(function() { 
 
    $(this).css('transform', 'rotate(90deg)'); 
 
    setTimeout(function() { 
 
    $(this).css('opacity', '0'); 
 
    }, 1000); 
 
});//end click

<div class="menuButton"></div>

Спасибо заранее.

Answer 1

Если у вас есть возможность использовать анимацию CSS, я настоятельно рекомендую воспользоваться animate.css.

В нем есть список готовых анимаций, которые легко применять, и вы можете использовать jQuery, чтобы просто добавить класс или удалить его.

Ознакомьтесь с простой демонстрационной версией ниже.

(function(){ 
 
    'use strict'; 
 
    
 
    $('#run-animation').on('click', runAnimation); 
 
    
 
    function runAnimation(){ 
 
    var target = $('.my-animate-target'); 
 
    target.addClass('rotateOut'); 
 
    
 
    setTimeout(function(){ 
 
     target.removeClass('rotateOut'); 
 
    }, 2000); 
 
    } 
 
    
 
}());

.container{ 
 
    margin:30px; 
 
} 
 
.my-animate-target{ 
 
    width:300px; 
 
    padding:20px; 
 
    text-align:center; 
 
    border:1px solid black; 
 
} 
 
#run-animation{ 
 
    margin:10px; 
 
    background-color:#fff; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="my-animate-target animated"> 
 
    <h1>Watch Me Go!</h1> 
 
</div> 
 
<button type="button" id="run-animation">Run Animation</button> 
 
</div>

Answer 2

Поскольку преобразование не имеет строго числовое значение (потребности, поворот, масштабирование и т.д.) ... он не будет работать с Jquery анимировать (в основном работает только с числовые значения) без какой-либо работы. Пожалуйста, см. Это other SO question для некоторых предложений, кроме Josh's

Answer 3

Я знаю, что методы jQuery привлекательны, но один из самых простых способов сделать это - включить анимацию в класс CSS, а затем использовать jQuery для добавления этого класса в ваш элемент. Вся магия происходит в пределах transition. В этом случае мы указываем элементу, что любые изменения в преобразовании занимают 1 секунду. Аналогично, любые изменения непрозрачности будут ждать 1 секунду до начала, а затем исполнится полсекунды.

.menuButton { 
    transition: transform 1s, opacity 500ms 1s; 
} 
.menuButton.hideMe { 
    transform: rotate(90deg); 
    opacity: 0; 
} 

Теперь ваш JQuery вызов будет:

$('.menuButton').click(function() { 
    $(this).addClass('hideMe'); 
});//end click 

Попробуйте сами на следующем примере: http://jsfiddle.net/dancingplatypus/qgnmk6s3/

Answer 4

В простом случае вы можете сделать это:

$("#image").click(function(){ 
$(this).rotate(90); 
$(this).hide(1000); 
}); 

Посмотрите на следующее: http://jsfiddle.net/RwEme/8572/