1

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

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

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

4

3 回答 3

0

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

于 2013-07-06T04:39:07.737 回答
0

我对我的回答做了一些调整，对我之前的不小心回答感到抱歉。您可以animate同时使用 whenmouseenter和mouseleaveevents。但不幸的是，表达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');
});
于 2013-07-06T04:40:31.653 回答
0 
$('#navContainer').hover(function(){
  $(this).animate({
    height: $(this)[0].scrollHeight+'px'
  }, 400);
}, function(){
  $(this).animate({
    height: 'auto'
  }, 400);
});

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

于 2013-07-06T04:47:54.610 回答