使用 jQuery 进行悬停转换 [重复]答案

【问题标题】：Hover transitions with jQuery [duplicate]使用 jQuery 进行悬停转换 [重复]
【发布时间】：2013-07-06 04:13:16
【问题描述】：

我想知道如何向这段代码添加过渡。

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

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

【问题讨论】：

api.jquery.com/animate
@undefined 抱歉，我仍然无法让它工作。你能告诉我吗？
@undefined 谢谢！这正是我想要的——效果很好。

标签： jquery animation hover transition

【解决方案1】：

我创建了一个JSFiddle，它可以满足您的需求。关于它的好处是您只需要标准的 HTML 和 CSS3 过渡，它们非常快，并且有大量的 CSS3 垫片可以让过渡在几乎所有浏览器中工作。我所做的是让<a>元素成为一个div的容器，你可以把所有的东西都放在里面，当你将鼠标悬停在任何绿色背景上时，你会看到文本的高度和颜色平滑过渡很好。

【讨论】：

感谢您制作这个，但我知道我可以使用 CSS3 过渡，但我使用 jQuery 进行过渡的原因是我要从 74 像素的固定高度变为自动高度，并且 CSS3 过渡不适用于此。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我对我的回答做了一些调整，对我之前的不小心回答感到抱歉。当mouseenter 和mouseleave 事件时，您可以使用animate。但很遗憾，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');
});

【讨论】：

这看起来接近我想要的，但它似乎不起作用。我创建了一个fiddle 来向您展示整个事情。
@JeremyBlazé 对不起，应该是{"height":"74px"}