Question

在阅读了与此相关的所有问题之后，我似乎无法弄清楚如何让它适合我。

我有一个社交图标列表，我希望在将鼠标悬停在＆＃34; Follow Me＆＃34;之后从左到右滑动。然后在徘徊时滑回去隐藏。

以下是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宽度的问题，并且仍在显示内联块元素。

示例：

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

Answer 2

您的代码中存在许多逻辑缺陷：

最初您正在隐藏容器，因此关闭了触发事件的所有可能性
您的选择器本身是一个li项目，其中没有子<li>。
增加元素的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

使用.animate（）宽度向右滑动

2 个答案: