Анимация в обратном порядке

483

11 января 2017, 02:20

Начал изучать JQuery, не могу понять как сделать анимацию при нажатии по блоку в одну сторону, а при нажатии на абзац выполнить эту же анимацию но в обратном порядке (как переход).

$(document).ready(function(){ 
   $('div').click(function(){ 
      $('div').toggleClass('a1').removeClass('a2');  
   });    
   $('p').click(function(){ 
      $('div').toggleClass('a2').removeClass('a1');  
   });    
});

div { 
   width: 200px; 
   height: 200px; 
   background: black; 
   position: relative; 
} 
 
.a1 { 
   animation: vras 3s forwards;  
} 
 
.a2 { 
   animation: vras 3s alternate-reverse forwards; 
} 
 
@keyframes vras{ 
   from { 
      left: 0; 
   } 
   33% { 
      left: 85%; 
   } 
   66% { 
      left: 0; 
   } 
   to{ 
      left: 500px; 
   } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div> 
<p>123</p>

Answer 1

Добавьте вторую анимацию с обратным движением. Я не знаю точно почему, но нельзя применять одну анимацию туда и обратно к одному элементу

$(document).ready(function(){ 
   $('div').click(function(){ 
      if($(this).hasClass('a1')){ 
        $(this).addClass('a2').removeClass('a1'); 
      }else{ 
        $(this).addClass('a1').removeClass('a2'); 
      }; 
   }); 
});

div { 
   width: 200px; 
   height: 200px; 
   background: black; 
   position: relative; 
} 
 
.a1 { 
   animation: vras1 3s forwards;  
} 
 
.a2 { 
   animation: vras2 3s forwards; 
} 
 
@keyframes vras1 { 
   from { 
      left: 0; 
   } 
   33% { 
      left: 85%; 
   } 
   66% { 
      left: 0; 
   } 
   to { 
      left: 500px; 
   } 
} 
@keyframes vras2 { 
   from { 
      left: 500px; 
   } 
   33% { 
      left: 0; 
   } 
   66% { 
      left: 85%; 
   } 
   to{ 
      left: 0; 
   } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Display:none в адаптивной верстке

Всем привет! Работаю над своим первым адаптивом, многих нюансов пока не знаю

474

c++

Использование OnPaint и Invalidate в MFC

Возникла проблема в MFC при работе с OnPaint и InvalidateДело в том, что при срабатывании Invalidate (которая делает недействительной клиентскую часть окна)...

498

c++

Вызов виртуальной функции С++

Не понимаю как вызывается функция Receiver::Process() в проектеИскал через (ctrl+shift+f), нашел только использование в Task::TaskExec()

393

c++

Вывести в консоль квадрат в квадрате со ***

Здравствуйте! С обычным квадратом все просто, но как в него засунуть поменьше квадрат, вот это проблемка

491