JQuery mostrare e nascondere div al click del mouse (animato)

Questo è il mio codice HTML:JQuery mostrare e nascondere div al click del mouse (animato)

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

E voglio mostrare .menu al clic su #showmenu scorrere da sinistra a destra (con animate). Facendo nuovamente clic su #showmenu o in qualsiasi punto della pagina del sito, .menu si nasconde (scorrere indietro a sinistra).

ho utilizzare jQuery 2.0.3

Ho provato questo, ma non fa quello che voglio.

$(document).ready(function() { 
    $('#showmenu').toggle(
     function() { 
      $('.menu').slideDown("fast"); 
     }, 
     function() { 
      $('.menu').slideUp("fast"); 
     } 
    ); 
});

fonte

2013-07-14 MM PP

Ok, allora perché -1? –

Se la mia domanda è sbagliata, ti prego di aiutarmi a migliorarlo –

penso che il -1 sia per non mettere quello che hai provato qui .. – krishgopinath

Quello .toggle() method era rimossi da jQuery in versione 1.9. Si può fare questo, invece:

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

Demo: http://jsfiddle.net/APA2S/1/

... ma come con il codice nella sua domanda che far scorrere verso l'alto o verso il basso. Per scorrere a sinistra oa destra è possibile effettuare le seguenti operazioni:

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

Demo: http://jsfiddle.net/APA2S/2/

Rilevando che questo richiede jQuery-UI's slide effect, ma ha aggiunto che tag alla tua domanda quindi immagino che è OK.

fonte

2013-07-14 11:46:25 nnnnnn

Grazie, ma come ho detto nella mia domanda, voglio usare la diapositiva a sinistra. –

Sì, stavo solo aggiungendo quella parte. – nnnnnn

-1 "back-to-left" non scorre su e giù – balexandre

Naturalmente slideDown e slideUp non fai quello che vuoi, hai detto che vuole che sia a sinistra/destra, non alto/basso.

Se la tua modifica alla tua domanda aggiungendo il tag jquery-ui significa che si sta utilizzando jQuery UI, mi piacerebbe andare con nnnnnn's solution, usando l'effetto di jQuery UI slide.

In caso contrario:

Supponendo che il menu inizia visibile (edit: oops, vedo che non è un'ipotesi valida, vedi nota sotto), se si vuole farlo scivolare verso sinistra e poi più tardi fai scorrere di nuovo da sinistra, potresti fare questo: Live Example | 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}); 
     } 
    }); 
});

Avrete bisogno di mettere position: relative sull'elemento menu.

Si noti che ho sostituito il toggle con click, perché tale modulo di toggle è stato rimosso da jQuery.

Se si desidera che il menu si avvii nascosto, è possibile regolare quanto sopra. Vuoi sapere la larghezza dell'elemento, in pratica, quando lo si mette fuori pagina.

Questa versione non interessa se il menu è inizialmente visibile o meno: 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>

fonte

2013-07-14 11:45:40

vorrei fare qualcosa di simile

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>

e in jQuery semplice come

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 

    }); 
});

fonte

2013-07-14 11:51:46 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>

fonte

2014-03-19 02:25:35

Prova questo:

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

Prima fuction è un'alternativa a JQuery deprecato ginocchiera :). Funziona bene con JQuery 2.0.3 e JQuery UI 1.10.3

fonte

2015-06-19 07:24:30

JQuery mostrare e nascondere div al click del mouse (animato)

risposta

Problemi correlati