JQuery - Анимация высоты: авто

Question

Можно ли анимировать -> css ('height', 'auto')?

рабочий пример 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"); 
}); 

Заранее спасибо! Питер

Answer 1

Try, если это поможет:

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

height должен быть auto по умолчанию, так что если вы просто удалить height это должно быть то же самое. Вам нужен removeClass из пользовательского интерфейса. Эффекты: http://docs.jquery.com/UI/Effects/removeClass

Просто протестировано - оно работает.

Answer 2

Это то, что я делаю:

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

это немного сложнее, но это работает.

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

Это динамичный способ сделать это - работает на любом навигаторе, не зная высоты.

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

На мой взгляд, вы должны использовать .scrollHeight, потому что если будет один уш более чем в одной строке (потому что текст будет слишком долго она будет ломаться в две строки).

В конце концов, это должно быть так:

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

удаления проверка стиль высота и чем добавить его. так что ваш код должен быть:

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

, прежде чем одушевленные вы могли бы использовать .stop(), но это зависит от вас (чтобы не имею, не останавливая анимацию после зависания слишком долго)

Answer 6

Мое решение аналогично inorganik годов в том, что он работает для любого количества элементов с заданным классом, за исключением того, что я сохраняю автовысоты в атрибуте высоты каждого элемента вместо массива. Это делает автоматическую высоту любого элемента легко доступной как $ (this) .attr ('height').

На странице загрузки, сохранить высоту авто, а затем установить элементы на нужную высоту:.

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

Затем, вместо $ («элемент») анимации ({высота: „авто“}), вы можете сказать следующее:

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

Answer 7

Вы можете попробовать это, видимо, это работает очень хорошо.

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

Отредактировано образец: http://jsfiddle.net/bafsar/Lo04vspb/