Question

我试图制作一个从列表中制作的下拉菜单。打开菜单后，元素悬停在元素的内容上，从图标转换为某些文本以及更改颜色。我有那个部分在工作。我需要帮助的是如何在用户将鼠标移开后将元素恢复到原始状态。我想我需要保存元素的html，然后在鼠标离开元素时使用.html（）将其重新放入。

这是我在jsfiddle上的代码链接以及动画发生的代码。这些图标不会显示出来，因为它们需要使用boostrap。

http://jsfiddle.net/b6mL75ek/1/

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

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

Answer 1

您的问题是您在第一个函数中创建了一个local变量，并且在第二个函数中指的是不存在的变量。如果您制作图标变量global，一切都会正常工作。

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

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);  
   }
);

<强>更新

所以这是新代码，你应该为每个项目提供两个文本或一个文本和一个图像，并一次显示其中一个：

<强> 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>

<强> JS：

$('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();
     }
);

我认为你可以从这个示例代码中获得想法。

希望它可以帮到你

需要jquery菜单动画的帮助

1 个答案: