Question

我有以下代码片段（见下文），并希望使功能切换 - 最好的方法是什么？

感谢-你。

<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>

Answer 1

您可以使用.toggle()在两组函数之间进行交换，如下所示：

$(".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

另外要注意你的标记，如果你拿走你现有的东西，它会是这样的：

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

上面的尾随逗号会让IE吹一个垫圈，所以在做像你这样的分手时要非常小心。此外，如果你在回调函数中没有做任何事情，你可以把它关掉。

Answer 2

@ user1063287也许是这样的，根据是否有效使用不同的动画：

$(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

jquery动画功能 - 使其切换

2 个答案: