jquery animate function - make it toggle

Question

I have the following snippet of code (see below) and want to make the function toggle - what is the best way to go about this??

Thank-you.

<html>
<head>
    <title></title>

<script type="text/javascript" src="js/jquery.js"></script>

<script>

$(document).ready(function()
{
  $("#left_pane").css("left","-300px");
  $("#middle_pane").css("left","0px");

  //toggle the componenet with class msg_body
  $(".toggle_right_pane").click(function()
  {       
      $('#left_pane').animate({
        left: '0',
      }, 500, function() {
        // Animation complete.
      });
      $('#main_pane').animate({
        left: '300',
      }, 500, function() {
        // Animation complete.
      });         

  });
});

</script>

<style>

body{
    margin: 0;
}

#left_pane{
    float:left;
    display:block;
    width: 300px;
    height: 100%;
    overflow:hidden;
    background: grey;
    position:absolute;
    z-index:1
}

#main_pane{
    float:left;
    height:100%;
    left:0px;
    overflow:scroll;
    position:absolute;
    background: red;        
    right:0;
}


</style>

</head>

<body>

    <div id="container">

        <div id="left_pane">
        menu
        </div>


        <div id="main_pane">
            <a class="toggle_right_pane" href="#">show/hide</a>
        </div>

    </div>

</body>
</html>

toggle how? Like swap left and right? like back and forth across the page? — jcolebrand
– jcolebrand, Commented Oct 21, 2010 at 17:22

Nick Craver · Accepted Answer · 2010-10-21 17:24:27Z

11

You ca use .toggle() to swap between two sets of functions, like this:

$(".toggle_right_pane").toggle(function() {       
  $('#left_pane').animate({ left: '0' }, 500);
  $('#main_pane').animate({ left: '300' }, 500);
}, function() {       
  $('#left_pane').animate({ left: '-300' }, 500);
  $('#main_pane').animate({ left: '0' }, 500);
});

You can test it out here.

Also be careful on your markup, if you take what you currently have it looks like this:

 $('#left_pane').animate({ left: '0', }, 500, function() { });
                                    ^ uh oh

The above trailing comma will make IE blow a gasket, so be very careful of these when doing the like break-up like you are. Also, if you're not doing anything in the callback function, you can just leave it off.

answered Oct 21, 2010 at 17:24

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Simon Over a year ago

Awesome! And thanks for the resource link jsfiddle.com look amazing!!

user1063287 Over a year ago

this was a great demo that i tried to get working for ages, then i switched the jsfiddle to use jquery 1.10.1 and it no longer worked. does anyone know the alternative when using jquery-1.10.2.min.js? edit: it seems to work up until jquery 1.8.3 when testing it in jsfiddle.

Selo · Accepted Answer · 2014-06-19 12:55:14Z

@user1063287 Maybe something like this, use different animations depending on if active or not:

$(function() {
        $("#left_pane").css("left","-300px");
        $("#main_pane").css("left","0px");
        $(".toggle_right_pane").addClass('active');

        $(".toggle_right_pane").click( function(e){
            e.preventDefault();
            if ($(this).hasClass("active") ) {
                $('#left_pane').animate({ left: '0' }, 500);
                $('#main_pane').animate({ left: '300' }, 500);         
                $(this).removeClass("active");
            } else {
                $('#left_pane').animate({ left: '-300' }, 500);
                $('#main_pane').animate({ left: '0' }, 500);  
                $(this).addClass("active");
            }
            return false;
        });
});

fiddle

Collectives™ on Stack Overflow

jquery animate function - make it toggle

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related