jquery - 使用.animate()宽度向右滑动

Question

在阅读了所有与此相关的问题后，我似乎仍然不知道如何让它为我工作。

我有一个社交图标列表，我希望将其悬停在“关注我”上时从左向右滑动，然后在悬停时滑回隐藏状态。

这是 JSFIDDLE 中的当前代码...

如果你修复了，你能指出我的错误在哪里吗？我对此还很陌生。非常感谢!

Answer 1

这可能不完全是您正在寻找的内容，但非常接近您所要求的内容。我已经停止使用 UL 和 LI 作为图标，只使用了 div 和 span，如果需要的话可以改回来。主要问题是将宽度设置为特定值(百分比不起作用)。

$('.social-top').hide();

$('#social-grid').mouseenter(function() {
    $('.social-top').show();
    $('.social-top').stop().animate({
        width: 225
    }, 1000);
});

$('#social-grid').mouseleave(function() {
    $('.social-top').stop().animate({
        width: 0
    }, 1000, function() {
        $('.social-top').hide();
    });

});​

这应该可以帮助您完成大部分工作。我使用显示/隐藏来解决 0 宽度和内联 block 元素仍然显示的问题。

示例:

http://jsfiddle.net/infiniteloops/NqrKK/13/