combinant slideToggle avec succès avec min-height

Question

J'ai actuellement une section joliment cachée en haut de mon site qui glisse sur le clic. L'animation fonctionne très bien avec slideToggle mais j'aimerais aussi que la div couvre au moins la hauteur de la fenêtre.

J'ai réussi à définir la hauteur de la fenêtre comme une variable et à modifier le css pour refléter cela, mais en le combinant avec le slideToggle rend l'animation sautillante.

jQuery(document).ready(function($) { 
    var win = $(window).height(); 
    $("#hidden").css("min-height", win); 
    $("a#toggle").click(function() { 
    var txt = $("#hidden").is(':visible') ? 'Show' : 'Hide'; 
    $("#toggle").text(txt); 
    $("#hidden").slideToggle(500); 
    }); 
}); 

Voici un violon http://jsfiddle.net/HZACf/

Si vous supprimez les deux premières lignes du jQuery, il glisse normalement.

Merci pour votre aide!

Answer 1

Essayez animate:

jQuery(document).ready(function ($) { 
    var $hidden = $("#hidden"), 
    currentHeight = $hidden.height(), 
    newHeight = $(window).height(); 

    newHeight = (currentHeight > newHeight) ? currentHeight : newHeight; 

    $("#hidden").css("height", newHeight); 

    $("a#toggle").click(function() { 
     var txt = $("#hidden").is(':visible') ? 'Show' : 'Hide'; 
     $("#toggle").text(txt); 
     $("#hidden").animate({ 
      height : "toggle" 
     }, 500); 
    }); 
}); 

Je l'ai utilisé animate mais vous pouvez utiliser slideToggle plutôt que nous traitons uniquement height des éléments maintenant.

Fiddle here