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

Posted 2023-05-08

【中文标题】使用 .animate () 宽度向右滑动

【英文标题】：Slide to right using .animate () width

【发布时间】：2012-03-28 11:20:51

【问题描述】：

在阅读了与此相关的所有问题后，我似乎仍然无法弄清楚如何让它为我工作。

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

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

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

【参考方案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/

【讨论】：

谢谢，加里。这就是我要找的。感谢您的帮助！

@MattJones 我很高兴能够提供帮助。如果您愿意，请随时接受这个答案 (meta.stackexchange.com/questions/5234/…)。

【参考方案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 这里

【讨论】：

Starx - 抱歉。我不小心分享了不正确的 jsfiddle。这是我要分享的jsfiddle.net/mattj06/cVVuV/1对不起！

另外重申一下，我希望在页面加载时隐藏社交图标。然后让它们在悬停在“跟我来”时出现

@MattJones，无论哪种方式，演示都应该是您想要的。不是吗？我现在要出去，30分钟后我会出去​​span>

@MattJones，这是一个快速更新的fiddle。你现在应该明白了