Начал изучать 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>
Добавьте вторую анимацию с обратным движением. Я не знаю точно почему, но нельзя применять одну анимацию туда и обратно к одному элементу
$(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>
Топ-20 лучших университетов мира по IT и программированию – Образование за границей
Всем привет! Работаю над своим первым адаптивом, многих нюансов пока не знаю
Возникла проблема в MFC при работе с OnPaint и InvalidateДело в том, что при срабатывании Invalidate (которая делает недействительной клиентскую часть окна)...
Не понимаю как вызывается функция Receiver::Process() в проектеИскал через (ctrl+shift+f), нашел только использование в Task::TaskExec()
Здравствуйте! С обычным квадратом все просто, но как в него засунуть поменьше квадрат, вот это проблемка