up vote 0 down vote favorite

EDIT BELLOW

How do I code the #west animation call on the #contentBox animation when it completes?

Basically I have a toggle button that animates/changes a div's css and then to another div's css once/after the first animation completes; then reverses the next time the toggle is executed.

Any help is appreciated. Thank-you.

The Conditional Statements:

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

I went to the old fashoned way with out shorthanding the conditional statement

share|improve this question
76% accept rate
feedback

3 Answers

up vote 0 down vote

You can always pass a callback function to the animate() method, which execuies once the animation is complete.

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

   });
share|improve this answer
Thx. Thats what I thought but when the toggle is clicked only the callback runs then if the toggle is clicked again, they both run but out of sync. – Andaero Mar 5 at 20:50
@Andaero, Running async is not a good solution. Not its better to give a little breathing space to the animation effect to complete. – Starx Mar 5 at 20:58
haw can I accomplish this? Thnx for the help. – Andaero Mar 5 at 21:01
feedback
up vote 0 down vote

The callback functionality should work in this case, but one thing to consider is if you've already animated to a 10x10 box (for example) and you ask jQuery to animate to the same 10x10 size - jQuery sees the animation as already completed. So in this case it would execute the callback right away. I'm guessing your if block for the animation there may need to be adjusted.

One thing you could do is add a 2 state check on your onClick event, something like this:

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

I'd recommend adding/removing classes and checking for classes to keep your state of animation, but I made this quick and dirty XD.

share|improve this answer
feedback
up vote 0 down vote accepted

I re-wrote the statement so it wasnt in shorthand and it works fine.

$("#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");
                });
            }
        });
share|improve this answer
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.