Условная анимация jQuery с функцией обратного вызова

Question

РЕДАКТИРОВАТЬ ЖЕЛТЫЙ

Как кодировать вызов анимации #west для анимации #contentBox после ее завершения?

По сути, у меня есть кнопка переключения, которая анимирует / изменяет CSS для div, а затем для css другого div один раз / после завершения первой анимации; затем переворачивает в следующий раз, когда переключение выполняется.

Любая помощь приветствуется. Спасибо вам.

Условные заявления:

$("#menuToggle").click(
    function() {

        var $west = $("#west");
        var $contentBox = $("#contentBox");

        $contentBox.animate({
                marginLeft : parseInt($contentBox
                        .css('marginLeft'), 10) == -320
                        ? $contentBox.outerWidth()
                        : -320
        });

        $west.animate({
            left : parseInt($west
                .css("left"), 10) == 0 
                ? -$west.outerWidth() 
                : 0
        });
   });

Я пошел по старому пути без кратких условных выражений

Answer 1

Функциональность обратного вызова в этом случае должна работать, но нужно учитывать одну вещь: если вы уже анимировали к блоку 10х10 (например) и попросили jQuery анимировать к тому же размеру 10х10 - jQuery видит анимацию уже завершено. Так что в этом случае он сразу же выполнит обратный вызов. Я предполагаю, что ваш блок if для анимации может потребоваться настроить.

Одна вещь, которую вы можете сделать, это добавить проверку состояния 2 на событие onClick, что-то вроде этого:

http://jsfiddle.net/ufomammut66/YAVk4/

Я бы рекомендовал добавлять / удалять классы и проверять классы, чтобы сохранить состояние анимации, но я сделал этот быстрый и грязный XD.

Answer 2

Я переписал заявление, чтобы оно не было сокращенным, и оно отлично работает.

$("#menuToggle").click(

        function() {
            //var n = $("#west");
            var position = $("#west").offset();

            if (position.left == "0") {
                $("#west").animate({"left" : "-=300px"}, "slow")
                .animate({"width" : "1%"}, "fast", 
                    function() {
                    $("#contentBox").animate({"width" : "98%"}, "normal");
                });
            } else {
                $("#contentBox").animate({"width" : "70%"}, "normal", 
                    function() {
                    $("#west").animate({"width" : "30%"}, "fast")
                    .animate({"left" : "+=300px"}, "slow");
                });
            }
        });

Answer 3

Вы всегда можете передать функцию обратного вызова методу animate (), который выполняется после завершения анимации.

$("#menuToggle").click(
    function() {

        var $west = $("#west");
        var $contentBox = $("#contentBox");

        $contentBox.animate({
                marginLeft : parseInt($contentBox
                        .css('marginLeft'), 10) == -320
                        ? $contentBox.outerWidth()
                        : -320
        }, 5000, function() {
             //this is the callback part
            $west.animate({
                left : parseInt($west
                    .css("left"), 10) == 0 
                    ? -$west.outerWidth() 
                    : 0
            });
        });

   });