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 - 动画到高度：自动

回答

相关问题