需要jquery菜单动画的帮助吗

我正在尝试制作一个下拉菜单，它是由一个列表组成的。打开菜单并将元素悬停在上方后，元素的内容将从图标转换为某些文本，并更改颜色。我让那部分工作。我需要的帮助是如何在用户将鼠标从元素上取下后将其返回到原始状态。我想我需要知道如何保存元素的html，然后在鼠标离开元素时使用.html（）将其放回

这里有一个链接，指向我在JSFIDLE上的代码和动画发生的代码。图标不会显示，因为它们需要boostrap

---

您的问题是，您正在第一个函数中创建一个

local

变量，并且在第二个不存在的函数中引用它。如果将图标设置为变量

全局

，则一切正常

因此，您的代码可能如下所示：

var icon;
$('li.social-list').hover(
    function(){
        icon = $(this).html();

        $(this).stop().animate({ width: "100px"}, 1000).text('Facebook'); 
   },
    function(){
        $(this).stop().animate({ width: "50px"}, 1000).html(icon);  
   }
);

更新：

<div id="social-slide">
    <ul>
         <li class="social-list"><a><i class="fa fa-facebook fa-2x"><span class="text1">1</span><span class="text2" style="display:none;">facebook</span></i></a></li>
         <li class="social-list"><a><i class="fa fa-twitter fa-2x"><span class="text1">2</span><span class="text2" style="display:none;">twitter</span></i></a></li>
         <li class="social-list"><a><i class="fa fa-instagram fa-2x"><span class="text1">3</span><span class="text2" style="display:none;">linkedin</span></i></a></li>
         <li class="activate"><a><i class="fa fa-bars fa-2x">click</i></a></li>
    </ul>
</div>

$('li.social-list').hover(
        function(){
            $(this).stop().animate({ width: "100px"}, 1000); 
            $(this).find(".text1").hide();
            $(this).find(".text2").show();
     },
        function(){
            $(this).stop().animate({ width: "50px"}, 1000);
            $(this).find(".text2").hide();
            $(this).find(".text1").show();
     }
);    

这是新代码，您应该为每个项目设置两个文本或一个文本和一个图像，并一次显示其中一个：

HTML:

<div id="social-slide">
    <ul>
         <li class="social-list"><a><i class="fa fa-facebook fa-2x"><span class="text1">1</span><span class="text2" style="display:none;">facebook</span></i></a></li>
         <li class="social-list"><a><i class="fa fa-twitter fa-2x"><span class="text1">2</span><span class="text2" style="display:none;">twitter</span></i></a></li>
         <li class="social-list"><a><i class="fa fa-instagram fa-2x"><span class="text1">3</span><span class="text2" style="display:none;">linkedin</span></i></a></li>
         <li class="activate"><a><i class="fa fa-bars fa-2x">click</i></a></li>
    </ul>
</div>

$('li.social-list').hover(
        function(){
            $(this).stop().animate({ width: "100px"}, 1000); 
            $(this).find(".text1").hide();
            $(this).find(".text2").show();
     },
        function(){
            $(this).stop().animate({ width: "50px"}, 1000);
            $(this).find(".text2").hide();
            $(this).find(".text1").show();
     }
);    

我想你可以从这个示例代码中得到这个想法

---

希望它能帮到你

，效果不错！非常感谢。现在我有另一个问题。如果我将鼠标悬停在列表项上，让它完成动画并取消悬停，它将返回到原始状态。但是，如果您快速将鼠标滑过它们，它将更改文本，但不会返回到原始状态。有时它仍然可以工作，但如果你来回滑动多次，它就不能工作了。这几乎就像你没有给它足够的时间来保存原始状态。我有办法解决这个问题吗？这是新的小提琴链接，我可能已经找到了。停止（真、假）而不是。stop（）似乎解决了这个问题。嗯，它似乎仍然偶尔发生。有没有任何检查可以确保不会发生这种情况？好的，所以实现这一点的最佳方法是为每个项目设置两个文本（或者在您的情况下，我认为是一个图像和一个文本），然后相应地显示和隐藏。我已经编辑了我的答案，并在以前的答案下添加了新代码