javascript - jQuery 悬停从底部缩放

Question

这当然会很容易，但我无法理解我做错了什么......

我正在尝试对影响 UL LI 之一内的链接的 UL 执行悬停效果。

我当前的代码如下所示:

$("ul.punchlines").hover(function () {
    $(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
});
$("ul.punchlines").mouseleave(function () {
    $(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});

这在技术上是有效的，因为它给出了要缩放的元素的底部保持原位并从底部向上缩放的效果，但是它分两个阶段进行，我试图让这种效果在一个 Action 中发生所以它是一个无缝的缩放和移动。

我可以使用基本的 CSS3 转换轻松地做到这一点，但由于 IE9 不支持它，我正在尝试使用 jQuery 以获得最大的浏览器支持。

谁能提供一点支持，首先是关于我如何让动画在一个 Action 中发生(而不是交错)，其次，如果这是正确的方法？我是 jquery 的新手，只是用它弄脏了我的手:-)

Answer 1

请参阅 JQuery hover api:

http://api.jquery.com/hover/

还要确保你的“li”有绝对位置。

$("ul.punchlines").hover(function () {
    $(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
}, function () {
    $(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});