Question

我想知道如何添加到此代码的转换。

$("#navContainer").hover(function(){
    $("#navContainer").css("height","auto");
    },function(){
    $("#navContainer").css("height","74px");
});

我在网上搜索了一段时间但找不到简单的解决方案......我对jQuery很新。这是exactly我正在尝试做的事情。

Answer 1

我创建了一个JSFiddle，可以满足您的需求。关于它的好处是你所需要的只是标准的HTML和CSS3过渡，这是非常快的，并且有很多CSS3垫片可以在几乎每个浏览器中使用转换。我所做的是使<a>元素成为div的容器，您可以将所有内容放入其中，并且在悬停在任何绿色背景上时，您将看到文本的高度和颜色过渡得很顺利。

Answer 2

我已经对我的答案做了一些调整，并对我以前不太谨慎的答案感到抱歉。您可以在animate和mouseenter事件时使用mouseleave。但不幸的是，animate在{"height": "auto"}表达式方面遇到了一些问题，所以我找到了解决它的问题：JavaScript jQuery Animate to Auto Height

http://jsfiddle.net/tVxNc/1/

$("#navContainer").hover(function(){
    var $navContainer = $("#navContainer");
    var $defaultHeight = $navContainer.height();
    var $autoHeight = $navContainer.css('height', 'auto').height();
    $("#navContainer").css('height', $defaultHeight).animate({"height": $autoHeight}, 400, 'swing');
}, function(){
    $("#navContainer").animate({"height": "80px"}, 400, 'swing');
});

Answer 3

$('#navContainer').hover(function(){
  $(this).animate({
    height: $(this)[0].scrollHeight+'px'
  }, 400);
}, function(){
  $(this).animate({
    height: 'auto'
  }, 400);
});

我最后在另一个讨论（@undefined推荐）中找到了它。感谢您的帮助：）

使用jQuery悬停转换

3 个答案: