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'});
});

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

我可以使用基本的CSS3过渡轻松完成此操作，但由于IE9不支持，我尝试使用jQuery来支持最大的浏览器。

任何人都可以首先提供一些关于如何让动画在一个动作（不是交错）中发生的支持，其次，如果这是正确的方法吗？我是jquery的新手，只是弄脏了它： - ）

Answer 1

请参阅JQuery hover api：

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

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

$("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'});
});

jQuery从底部悬停缩放

1 个答案: