web-dev-qa-db-fra.com

JQuery affiche et masque div en un clic de souris (animer)

Ceci est mon code HTML:

<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;">
    <ul>
        <li>Button1</li>
        <li>Button2</li>
        <li>Button3</li>
    </ul>
</div>

Et je veux montrer .menu en cliquant sur #showmenu en glissant de gauche à droite (avec animer). En cliquant à nouveau sur #showmenu ou n'importe où sur la page du site, .menu sera masqué (retournez à gauche).

J'utilise JQuery 2.0.3

J'ai essayé cela, mais ça ne fait pas ce que je veux.

$(document).ready(function() {
    $('#showmenu').toggle(
        function() {
            $('.menu').slideDown("fast");
        },
        function() {
            $('.menu').slideUp("fast");
        }
    );
});
javascriptjqueryjquery-uijquery-effects
28
MM PP

Cette .toggle() méthode était supprimé de jQuery dans la version 1.9. Vous pouvez le faire à la place:

$(document).ready(function() {
    $('#showmenu').click(function() {
            $('.menu').slideToggle("fast");
    });
});

Démo: http://jsfiddle.net/APA2S/1/

... mais comme dans le code de votre question, cela pourrait glisser vers le haut ou le bas. Pour faire glisser à gauche ou à droite, vous pouvez effectuer les opérations suivantes:

$(document).ready(function() {
    $('#showmenu').click(function() {
         $('.menu').toggle("slide");
    });
});

Démo: http://jsfiddle.net/APA2S/2/

Notez que cela nécessite l'effet de diapositive de jQuery-UI , mais vous avez ajouté cette balise à votre question, donc je suppose que c'est OK.

61
nnnnnn

Bien sûr, slideDown et slideUp ne font pas ce que vous voulez, vous avez dit que vous voulez que ce soit gauche/droite, pas haut/bas.

Si votre modification à votre question en ajoutant la balise jquery-ui signifie que vous utilisez jQuery UI, j'utiliserais la solution nnnnnn , en utilisant l'effet slide de jQuery UI.

Si non:

En supposant que le menu soit visible au début (edit: oops, je vois que ce n’est pas une hypothèse valable; voir la remarque ci-dessous), si vous souhaitez le faire glisser vers la gauche, puis plus tard vers la gauche, vous pouvez faire ceci: Exemple en direct | Live Source

$(document).ready(function() {
    // Hide menu once we know its width
    $('#showmenu').click(function() {
        var $menu = $('.menu');
        if ($menu.is(':visible')) {
            // Slide away
            $menu.animate({left: -($menu.outerWidth() + 10)}, function() {
                $menu.hide();
            });
        }
        else {
            // Slide in
            $menu.show().animate({left: 0});
        }
    });
});

Vous aurez besoin de mettre position: relative sur l'élément de menu.

Notez que j'ai remplacé votre toggle par click, car cette forme de toggle a été supprimée de jQuery.

Si vous voulez que le menu commence par être masqué, vous pouvez régler ce qui précède. En gros, vous voulez connaître la largeur de l'élément lorsque vous le mettez hors page.

Cette version n'a pas d'importance que le menu soit initialement visible ou non: Live Copy | Live Source

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none; position: relative;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>
  <script>
    $(document).ready(function() {
        var first = true;

        // Hide menu once we know its width
        $('#showmenu').click(function() {
            var $menu = $('.menu');
            if ($menu.is(':visible')) {
                // Slide away
                $menu.animate({left: -($menu.outerWidth() + 10)}, function() {
                    $menu.hide();
                });
            }
            else {
                // Slide in
                $menu.show().css("left", -($menu.outerWidth() + 10)).animate({left: 0});
            }
        });
    });
  </script>
</body>
</html>
12
T.J. Crowder

Je ferais quelque chose comme ça

DEMO in JsBin: http://jsbin.com/ofiqur/1/

  <a href="#" id="showmenu">Click Here</a>
  <div class="menu">
    <ul>
      <li><a href="#">Button 1</a></li>
      <li><a href="#">Button 2</a></li>
      <li><a href="#">Button 3</a></li>
    </ul>
  </div>

et dans jQuery aussi simple que

var min = "-100px", // remember to set in css the same value
    max = "0px";

$(function() {
  $("#showmenu").click(function() {

    if($(".menu").css("marginLeft") == min) // is it left?
      $(".menu").animate({ marginLeft: max }); // move right
    else
      $(".menu").animate({ marginLeft: min }); // move left

  });
});
2
balexandre
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".click-header").click(function(){
            $(this).next(".hidden-content").slideToggle("slow");
            $(this).toggleClass("expanded-header");
        });
    });
</script>

.demo-container {
    margin:0 auto;
    width: 600px;
    text-align:center;
}
.click-header {
    padding: 5px 10px 5px 60px;
    background: url(images/arrow-down.png) no-repeat 50% 50%;
}
.expanded-header {
    padding: 5px 10px 5px 60px;
    background: url(images/arrow-up.png) no-repeat 50% 50%;
}
.hidden-content {
    display:none;
    border: 1px solid #d7dbd8;
    padding: 20px;
    text-align: center;
}

<div class="demo-container">
    <div class="click-header">&nbsp;</div>
    <div class="hidden-content">Lorem Ipsum.</div>
</div>
0
Porta Shqipe

Essaye ça:

<script type="text/javascript">
$.fn.toggleFuncs = function() {
    var functions = Array.prototype.slice.call(arguments),
    _this = this.click(function(){
        var i = _this.data('func_count') || 0;
        functions[i%functions.length]();
        _this.data('func_count', i+1);
    });
}
$('$showmenu').toggleFuncs(
        function() {
           $( ".menu" ).toggle( "drop" );
            },
            function() {
                $( ".menu" ).toggle( "drop" );
            }
); 

</script>

La première fonction est une alternative à la bascule déconseillée JQuery :). Fonctionne bien avec JQuery 2.0.3 et JQuery UI 1.10.3

0
John Doe