Javascript jquery切换宽度动画的两个bug

因此，我目前正在开发一个网站，该网站使用了我用JQUERY 1.10.2制作的动画徽标

工作原理：我有一个首字母缩略词“AD”，只要鼠标移到其中一个字母上，全名就会从每个字母的右侧滑出

就像广告->A…D…->敏锐的梦想

如果你不明白这里是一个在我的网站上的现场演示

我的代码是：

<script type="text/javascript">
    $(function () {
        $(".logo-firstletter").hover(function () {
            $(".logo-full").animate({width: 'toggle'}, 500);
        });
    });
</script>

$（函数（）{
$（“.logo firstletter”）.hover（函数（）{
$（“.logo full”）.animate（{width:'toggle'}，500）；
});
});

也可以随意查看我的页面的源代码

.logo firstletter类是自解释的，.logo full是其他字母

错误1 所以问题是，动画效果很好，但是如果你把鼠标放在右边（不再放在第一个字母上），它就会无休止地动画。。。你自己试试看

错误2 如果您只是在徽标的字母上重复移动鼠标，jquery似乎会记住您将鼠标放在其上的次数，因此它将继续设置动画，直到“计数”结束

非常感谢您的帮助，如果有更好的方法，我也非常欢迎

提前谢谢

也许是这样的：

$(".logo-firstletter").hover(function () {
     if($(".logo-full").is(":animated")) return;   //Add this
     $(".logo-full").animate({width: 'toggle'}, 500);
});

这样，我们只在没有当前动画的情况下设置动画

编辑： 在html中添加新的包装器元素

徽标容器

，如下所示：

    <div id="logo-container">
        <div  class="logo-firstletter">A</div>
        <div class="logo-full">custic</div>
        <div  class="logo-firstletter">D</div>
        <div class="logo-full">ream</div>
    </div>

---

希望这有帮助。干杯

谢谢你的回答，是的，它确实有帮助：D但唯一的问题是，它使它保持打开状态，我仍然希望它在鼠标离开后关闭。我明白了。。。我编辑了答案，你能再试一次吗？很遗憾，没有，主要问题又回来了（我的网站上也更新了代码，你可以看到）是的，它解决了所有问题D非常感谢你的时间和耐心！我也很聪明，我明白你做了什么。^我没想过。很高兴这对你有帮助：）。干杯，来自玻利维亚拉巴斯

$("#logo-container").hover(function () {
    $(".logo-full").animate({width: 'show'}, 500);
},function () {
    $(".logo-full").animate({width: 'hide'}, 500);
});