Jquery - Animar a la altura: auto

Question

¿es posible animar -> css ('altura', 'auto')?

ejemplo de trabajo http://www.jsfiddle.net/V9Euk/154/

CSS

#div1 { 
    position:absolute; 
    right:30px; 
    bottom:0px; 
    border:1px solid #ff0000; 
    overflow:hidden; 
} 

html

<div id="div1" style="height:20px;"> 
     Test<hr /> 
     text text <br /> 
     text text <br /> 
     text text <br />    
    </div> 

jQuery

$("#div1").hover(

function() { 

    $('#div1').animate({ 
     "height": "auto" 
    }, "fast");     // <---- dont work :(

}, function() { 

    $('#div1').animate({ 
     "height": "20px" 
    }, "fast"); 
}); 

Gracias de antemano! Peter

Answer 1

probar si esto ayuda:

$('#div1').removeClass("someClassWithYourHeight", "fast"); 

height debería ser auto por defecto, así que si usted acaba de quitar height que debería ser el mismo. Necesita el removeClass de UI Effects: http://docs.jquery.com/UI/Effects/removeClass

Acabo de probarlo - funciona.

Answer 2

Esto es lo que hago:

//Get Current Height 
var currentHeight = $("#mybox").css("height"); 

//Set height to auto 
$("#mybox").css("height","auto"); 

//Store auto height 
var animateHeight = $("#mybox").css("height"); 

//Put height back 
$("#mybox").css("height", currentHeight); 

//Do animation with animateHeight 
$("#mybox").animate({ 
    height: animateHeight 
    }, 500); 

Answer 3

es un poco complicado, pero funciona.

var height = parseInt($("#test").slideDown(0).css("height")); 
$("#test").css("height", "0px"); // or any other initial state you want   
$("#test").stop(true, true).animate({ height: height + "px"}, 1000); 

Answer 4

Aquí hay una forma dinámica de hacerlo: funciona en cualquier navegador sin conocer las alturas.

var heights = new Array(); 
$('ul.nav > li').each(function(i) { 
    heights[i] = $(this).find('ul').height(); 
    $(this).find('ul').height(0); 
}); 
$('ul.nav > li').hover(function() { 
    var i = $(this).index(); 
    $(this).children('ul').stop().animate({height: heights[i]},200); 
},function() { 
    $(this).children('ul').stop().animate({height: '0'},200); 
}); 

Answer 5

En mi opinión usted debe utilizar .scrollHeight, porque si no habrá en un ancho más de una línea (ya que el texto será demasiado largo se romperá en dos líneas).

Al final debería ser así:

http://jsfiddle.net/V9Euk/945/

altura cheque estilo de eliminación y de añadirlo. por lo que el código debe ser:

$(document).ready(
function rt() { 
    $("#div1").hover(

    function() { 

     $('#div1').animate({ 
      "height": heightOfDiv 
     }, "fast");     

    }, function() { 

     $('#div1').animate({ 
      "height": "20px" 
     }, "fast"); 
    }); 
    heightOfDiv=$("#div1")[0].scrollHeight; 
    $('#div1').css({'height':'20px'}); 
}); 

antes animado podría utilizar .Stop(), pero depende de usted (a no tiene la animación no parando tras oscilar demasiado tiempo)

Answer 6

Mi solución es similar a la de inorganik en que funciona para cualquier cantidad de elementos con una clase dada, excepto que almaceno las alturas automáticas dentro del atributo de altura de cada elemento en lugar de una matriz. Esto hace que la altura automática de cualquier elemento sea fácilmente accesible como $ (this) .attr ('height').

al cargar la página, almacenar las alturas de automóviles y luego fijar los elementos a la altura deseada:.

$(function() { 
    $('.element').each(function() { 
    $(this).attr('height', $(this).height() + ''); 
    }) 
    $('.element').css('height', '20px'); 
}); 

Entonces, en lugar de $ ('elemento') animar ({height: 'auto'}), puede decir esto:

$('.element').animate({height : $(this).attr('height')}) 

Answer 7

Puede probar esto, aparentemente funciona muy bien.

$('#div1').animate({ 'height': $('#div1')[0].scrollHeight }, "fast") 
      .promise().done(function() { 
      $('#div1').height('auto'); 
      }); 

muestra Editado: http://jsfiddle.net/bafsar/Lo04vspb/