Помогите с анимацией по клику
Проблема появилась, вот код
<div id="main"></div> <div id="anim_item1"> </div>
#main {
z-index: 2;
width: 32px; height: 32px;
position: absolute; top: 240px; left: 240px; right: 240px; bottom: 240px;
background-color: #222222;
}
#anim_item1 {z-index: 1; background-color: red;width: 28px; height: 28px; position: absolute; top: 242px; left: 242px; right: 242px; bottom: 242px;}
$(document).ready(function(){
$("#main").click(function (){
$(anim_item1).animate({top:128, left:192}, 750, "easeInQuad");
$(anim_item1).animate({top:72, left:212}, 750, "easeOutQuad");
});
});
Так вот, проблема в том, что после клика по меин выполняется анимация, а при повторном клике (после выполнения анимации) выполняется вторая анимация, а мне нужно чтобы элемент возвращался на исходную позицию. Помогите, пожалуйста! :help: :help: :cray: |
Corian,
так?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#main {
z-index: 2;
width: 32px;
height: 32px;
position: absolute;
top: 240px;
left: 240px;
background-color: #222222;
}
#anim_item1 {
z-index: 1;
background-color: red;
width: 28px;
height: 28px;
position: absolute;
top: 242px;
left: 242px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var a = 1;
$("#main").click(function() {
a ^= 1;
$("#anim_item1").animate([{
top: 128,
left: 192
}, {
top: 242,
left: 242
}][a], 750, ["easeInQuad", "easeOutQuad"][a]);
});
});
</script>
</head>
<body>
<div id="main"></div>
<div id="anim_item1"></div>
</body>
</html>
|
Пожалуйста, можно объяснения о поводу переменной а
|
Corian,
1,0,1,0,1,0... :-? |
Тип если один, то анимация произошла а если 0 то нет?
|
Corian,
если первый клик запускаем анимацию с первым параметром строки 37 38 если втрой клик запускаем строки 40 41 |
А к чему тут переменная а? Объясните пожалуйста, я новичок.
|
Corian,
эта переменная выбирает из массива нужные параметры для анимации |
Спасибо за помощь, пойду-ка я учиться :)
|
| Часовой пояс GMT +3, время: 00:15. |