fonction animate de jquery - la faire basculer

J'ai l'extrait de code suivant (voir ci-dessous) et que vous souhaitez rendre la fonction de bascule - quelle est la meilleure façon d'aller à ce sujet??

Merci.

<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>
  • basculer comment? Comme swap de gauche et de droite? comme d'avant en arrière sur la page?
InformationsquelleAutor Simon | 2010-10-21
  1. 12

    Ca vous utilisez .toggle() pour permuter entre les deux ensembles de fonctions, comme ceci:

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

    Vous pouvez le tester ici.

    Également être prudent sur votre balisage, si vous prenez ce que vous avez actuellement, il ressemble à ceci:

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

    Ci-dessus virgule fera IE coup d'un joint d'étanchéité, donc être très prudent de ces lorsque vous faites le comme pause-comme vous êtes. Aussi, si vous ne faites rien dans la fonction de rappel, vous pouvez simplement laisser de côté.

    • Génial! Et merci pour le lien de ressource jsfiddle.com incroyable!!
    • ce fut une belle démonstration que j'ai essayé de travail pour les âges, ensuite, j'ai changé le jsfiddle pour utiliser jquery 1.10.1 et il ne travaillait plus. personne ne sait l'alternative lors de l'utilisation de jquery-1.10.2.min.js? edit: il semble à travailler jusqu'à jquery 1.8.3 lors de l'essai en jsfiddle.
    InformationsquelleAutor Nick Craver
  2. 0

    @user1063287 Peut-être quelque chose comme cela, utilisez des animations différentes selon si elle est active ou pas:

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

    violon

    InformationsquelleAutor Selo