CODEWITHSUNDEEP
jquery
Peter
Peter

Reputation: 549

Jquery - Animate to height:auto

is it possible to animate -> css('height','auto') ?

working example 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");
});

Thanks in advance! Peter

Upvotes: 8

Views: 10915

Answers (8)

deepwell
deepwell

Reputation: 31

Hi give this a try:

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

Upvotes: 0

bafsar
bafsar

Reputation: 1108

You can try this, apparently it works very well.

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

Edited sample : http://jsfiddle.net/bafsar/Lo04vspb/

Upvotes: 1

mgrahamjo
mgrahamjo

Reputation: 219

My solution is similar to inorganik's in that it works for any number of elements with a given class, except I store the auto heights within the height attribute of each element instead of an array. This makes the auto height of any element easily accessible as $(this).attr('height').

On page load, store the auto heights and then set the elements to the desired height:

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

Then, instead of $('.element').animate({height : 'auto'}), you can say this:

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

Upvotes: 2

Maciej Paprocki
Maciej Paprocki

Reputation: 1379

In my opinion you should use .scrollHeight, because if there will be in one br more than one line (because text will be too long it will break in two lines).

In the end it should be like this :

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

delete style check height and than add it. so your code should be:

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

before animate you could use .stop() but it depends on you (to dont have non-stoping animation after hovering too long)

Upvotes: 1

Behnam Esmaili
Behnam Esmaili

Reputation: 5967

it is a little tricky but it works. 

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

Upvotes: 2

inorganik
inorganik

Reputation: 25525

Here's a dynamic way to do it- works on any nav without knowing the heights.

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);
});

Upvotes: 0

Mikey G
Mikey G

Reputation: 3491

This is what i do:

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

Upvotes: 3

Lasse Espeholt
Lasse Espeholt

Reputation: 17782

Try if this helps:

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

height should be auto per default, so if you just remove height it should be the same. You need the removeClass from UI Effects: http://docs.jquery.com/UI/Effects/removeClass

Just tested it - it works.

Upvotes: 0

Related Questions