jquery animate function - make it toggle_问答_开发者

jquery animate function - make it toggle

开发者 https://www.devze.com 2023-01-21 00:40 出处：网络

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>

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.

@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