使用jQuery进行悬停转换

我想知道如何为此代码添加转换。使用jQuery进行悬停转换

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

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

来源

2013-07-06 Jeremy Blazé

http://api.jquery.com/animate/ – undefined

@undefined对不起，但我仍然无法得到它的工作。你能展示我吗？ –

@undefined谢谢！这正是我想要的 - 它完美运作。 –

我创建了一个JSFiddle，它可以做你想做的。关于它的很好的部分是你需要的是标准的HTML和CSS3转换，它们速度超快，并且有很多CSS3垫片可以在几乎每个浏览器中都能够使用转换。我所做的是将<a>元素作为div的容器，您可以将所有内容放入其中，并且在任何绿色背景上悬停时，您都会看到文本的高度和颜色平滑，漂亮地转换。

来源

2013-07-06 04:39:07

感谢您提出这个问题，但我知道我可以使用CSS3转换，但我使用jQuery进行转换的原因是，我将从74像素的固定高度转换为自动高度，而CSS3转换不会在这方面工作。 –

我已经对我的答案做了一些调整，对于我以前的不重要的一点感到抱歉。您可以在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'); 
});

来源

2013-07-06 04:40:31 Melkor

这看起来接近我想要的，但它似乎并没有工作。我创建了一个[小提琴]（http://jsfiddle.net/tVxNc/）向你展示整个事情。 –

@JeremyBlazé对不起，应该是'{“height”：“74px”}' – Melkor

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

我发现它在另外一个讨论的（通过@undefined推荐）结束。感谢您的帮助:)

来源

2013-07-06 04:47:54

使用jQuery进行悬停转换

回答

相关问题