Faire apparaitre ou disparaitre un élément en jQuery

Faire apparaître ou disparaître un élément en jQuery

See the Pen fadetoggle by yuyazz (@yuyazz) on CodePen.

L’effet fadeToggle permet de masquer un élément et de le faire revenir avec un effet de fondu. Voici notre petit menu :

<!doctype html>
<!--[if lte IE 7]> <html class="ie67 ie678" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="ie8 ie678" lang="fr"> <![endif]-->
<!--[if IE 9]> <html class="ie9" lang="fr"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="fr"> <!--<![endif]-->
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
        <link rel="stylesheet" href="style.css" media="all">
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>
    <body>
 MENU
<button id="menu">Menu</button>
<ul class="menu">
    <li class="menu">menu 1</li>
    <li class="menu">menu2</li>
</ul>

Au clic sur le bouton, on fait disparaître le menu, et on le fait revenir en cliquant à nouveau sur le bouton.

    <script>
        $(document).ready(function(){
        $('#menu').click(function(){
            $('.menu').fadeToggle('500');
        });
        });
    </script>

27/03/2014 Mis à jour le 19/12/2018 Par Copier coller | Dans jQuery