使用 .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();
    });

});​

这应该可以让您大部分时间到达那里。我使用 show/hide 来解决 0 宽度和 inline-block 元素仍然显示的问题。

例子：

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

Answer 2

你的代码有很多逻辑缺陷：

1. 最初您隐藏了容器，因此关闭了触发事件的所有可能性
2. 你的选择器本身是一个li项，里面没有子<li>。
3. 并且增加元素的width 属性不会使其向左。您需要left、right 甚至padding-left 或margin-left

您的语法错误是，要设置动画的属性和时间在同一个花括号内。正确的语法

$('element').animate(
   {
       //css properties
       left: "50"
   },
   5000 //The time in milliseconds or `fast`, `slow`
);

使用这个

$('.social-top li:not(.social-flyout)').hover(function() {
    $('.social-top').animate({
        right: 0
    },"fast"
    );
});

我还把position: absolute 给了.social-top。这是一个有效的Demo 这里