jquery - 動畫到高度：自動

是否可以動畫 - > css（'height'，'auto'）？jquery - 動畫到高度：自動

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

提前感謝！彼得

來源

2010-08-21 Peter

如果你想有一個滑出動畫，你應該看看jQuery用戶界面：http://jqueryui.com/demos/effect/ – 2010-08-21 08:53:50

嘗試，如果這有助於：

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

height應該auto每默認的，所以如果你只是刪除height它應該是相同的。你需要removeClass從UI效果：http://docs.jquery.com/UI/Effects/removeClass

剛剛測試它 - 它的作品。

來源

2010-08-21 09:05:34

等等，什麼？何時removeClass（）獲得持續時間參數？ – 2010-08-21 09:10:36

http://docs.jquery.com/UI/Effects/removeClass糟糕，應該是UI-Effects，謝謝 – 2010-08-21 09:11:13

感謝您的幫助！我用jquery ui幻燈片使用靈魂。很棒！ – Peter 2010-08-21 09:23:15

這是我做的：

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

來源

2012-02-10 19:20:20

這是一個有點棘手，但它的工作原理。

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

來源

2012-06-03 17:59:38

就像一個魅力！ – 2012-10-25 18:26:39

這是一個動態的方式來做到這一點 - 在任何導航而不知道高度的作品。

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

來源

2012-11-08 22:06:08 inorganik

在我看來，你應該使用.scrollHeight，因爲如果有會在一個BR大於一行（因爲文本太長，將在兩行突破）以上。

最後，它應該是這樣的：

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（），但它取決於你（要不要徘徊過久後有非回採動畫）

來源

2012-12-18 10:58:35

我的解決方案類似於inorganik的因爲它適用於具有給定類的任意數量的元素，除了我將自動高度存儲在每個元素的高度屬性中而不是數組中。這使得任何元素的自動高度都可以以$（this）.attr（'height'）方便訪問。

在頁面加載，存儲自動高度，然後設置元件以所需的高度：

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

然後，不是$（「元素」）動畫（{高度：‘自動’} ），你可以這樣說：

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

來源

2013-02-28 18:07:51 mgrahamjo

你可以試試這個，顯然它工作得很好。

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

編輯的樣本：http://jsfiddle.net/bafsar/Lo04vspb/

來源

2014-11-30 01:53:28 bafsar

jquery - 動畫到高度：自動

回答

相關問題