Jquery - Animacja do wysokości: auto

Question

czy można animować -> css ("wysokość", "auto")?

przykładem pracy 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"); 
}); 

Z góry dzięki! Peter

Answer 1

spróbować, jeśli to pomoże:

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

height powinny być auto domyślnie, więc jeśli po prostu usunąć height powinna być taka sama. Potrzebujesz removeClass od UI Efekty: http://docs.jquery.com/UI/Effects/removeClass

Po prostu testowałem - to działa.

Answer 2

To co mam zrobić:

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

jest to trochę skomplikowane, ale to działa.

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

Oto dynamiczny sposób, aby to zrobić - działa na każdej nawigacji bez znajomości wysokości.

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

Moim zdaniem należy użyć .scrollHeight, bo jeśli nie będzie w jednym br więcej niż jednej linii (ponieważ tekst będzie zbyt długa będzie przerwa w dwóch liniach).

W końcu powinno być tak:

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

kasowania wysokość check niż styl i dodać go. więc kod powinien być:

$(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'}); 
}); 

przed ożywionej można użyć .Zatrzymaj(), ale to zależy od ciebie (aby nie mieć animacji non-stoping po unoszące się zbyt długo)

Answer 6

Moje rozwiązanie jest podobne do inorganik-tych w tym, że działa dla dowolnej liczby elementów z daną klasą, z wyjątkiem I przechowuje automatyczne wysokości w atrybucie wysokości każdego elementu zamiast tablicy. To sprawia, że ​​wysokość automatyczna dowolnego elementu jest łatwo dostępna jako $ (this) .attr ("height").

Na stronie obciążenia, przechowywania wysokości auto, a następnie ustawić elementy do żądanej wysokości.

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

Następnie, zamiast $ ('element') animować ({height: 'auto'}), możesz to powiedzieć:

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

Answer 7

Możesz spróbować, najwyraźniej działa bardzo dobrze.

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

Zmieniano próbki: http://jsfiddle.net/bafsar/Lo04vspb/