jQuery .animate (), проблемы с переключением

Question

Я относительно новичок в js и пытаюсь реализовать простую функцию .animate () в моем портфолио.Как вы можете видеть здесь , с кодом, который я написал, div с ленточкой отлично скользит вниз, но, похоже, игнорирует «остальную» часть сценария.

Я знаю, что явозможно, я делаю глупую ошибку, но сейчас мне кажется, что я не могу найти что-то лучше!

Извините за мой плохой английский, полный отстой, чтобы быть итальянцем.

Answer 1

Просто придумала решение для другого, как это минуту назад.

http://jsfiddle.net/HF5A5/

Обычно вы умножаете значение на 1 или -1, а затем переключаете это значение.

$(document).ready(function() {
    var direction = -1;
    $('#toggle').click(function() {
            direction -= direction * 2;
            $('#ribbon').animate({
                marginTop: "+=" + direction * 300 + "px"
            }, 1700);
            return false;
    });
});

или еще лучше: http://jsfiddle.net/HF5A5/1/

$(document).ready(function() {
    var direction = 1;
    $('#toggle').click(function() {
            $('#ribbon').animate({
                marginTop: "+=" + direction * 300 + "px"
            }, 1700, function(){
                $(this).stop();
                direction -= direction * 2;
            });
            return false;
    });
});

Answer 2

Просто взяв то, что у вас было, просто поместите if внутри события click.

http://jsfiddle.net/Rkqge/12/

$(document).ready(function() {
  $('#toggle').click(function() {
    if ($('#ribbon').css("margin-top") == "-300px") {
        $('#ribbon').animate({
            marginTop: "0px"
        }, 1700);
    } else {
        $('#ribbon').animate({
            marginTop: "-300px"
        }, 1700);
    }
 });
});