Форум

Corian · #1 (**permalink**) 10.05.2015, 12:18

Проблема появилась, вот код

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

Так вот, проблема в том, что после клика по меин выполняется анимация, а при повторном клике (после выполнения анимации) выполняется вторая анимация, а мне нужно чтобы элемент возвращался на исходную позицию.
Помогите, пожалуйста!

рони · #2 (**permalink**) 10.05.2015, 12:38

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 · #3 (**permalink**) 10.05.2015, 13:29

Пожалуйста, можно объяснения о поводу переменной а

рони · #4 (**permalink**) 10.05.2015, 13:36

Corian,
1,0,1,0,1,0...

Corian · #5 (**permalink**) 10.05.2015, 13:37

Тип если один, то анимация произошла а если 0 то нет?

рони · #6 (**permalink**) 10.05.2015, 13:41

Corian,
если первый клик запускаем анимацию с первым параметром строки 37 38 если втрой клик запускаем строки 40 41

Corian · #7 (**permalink**) 10.05.2015, 13:44

А к чему тут переменная а? Объясните пожалуйста, я новичок.

рони · #8 (**permalink**) 10.05.2015, 13:48

Corian,
эта переменная выбирает из массива нужные параметры для анимации

Corian · #9 (**permalink**) 10.05.2015, 13:53

Спасибо за помощь, пойду-ка я учиться

Форум

Справочник

Discord чат

Курсы javascript