Question

我有一个社交图标列表，当悬停在宽度增加以显示更多内容时，其余减小宽度以保持整体ul宽度相同。我想知道是否有人可以告诉我，我做的方式是好还是有更好的方法。我仍在努力学习jquery及其最佳实践。

此外一切似乎都运作良好，但最后一个列表项会偶尔下降。我认为它与悬停物品宽度的增加速度有所不同，与其他物品的减少速度不同。

这就是我所拥有的（请注意，目前facebook只有与之相关的内容）：

$(function() {
    $('.social-container > li').on({
        mouseenter: function () {
            $('.social-container > li').stop().animate({'width':'16%'},400);
            $(this).stop().animate({'width':'50%'},400).queue(function(){
                $(this).find(".icon-placeholder").hide();
                $(this).find(".icon-link").stop().fadeIn("slow").show();
                $(this).dequeue();
            });

       },
        mouseleave: function () {
            $('.social-container > li').stop().animate({'width':'25%'},400);
            $(this).stop().animate({'width':'25%'},400);  
            $(this).find(".icon-link").stop().fadeOut("slow").hide();
            $(this).find(".icon-placeholder").show();
       }
  });
});

https://jsfiddle.net/jfunchio/uuwdr5Ly/1/

Answer 1

https://jsfiddle.net/uuwdr5Ly/4/

你最好使用一些css动画而不是jquery - 现在它很有可能。

我对您的代码做了什么？

.icon-link{
opacity: 0;
position: absolute;

不幸的是，您无法将项目从display: none设置为display: block - 因此您可以隐藏它，并将不透明度设置为0并将其置于绝对位置。

ul.social-container:hover li{
    width: 16%;
}

ul.social-container li:hover {
    width: 50%;
}

在这里，您可以设置如何在鼠标悬停时调整社交内容的大小。在mouseout上，他们将获得25％的宽度。无需撰写.on('mouseover')！

ul.social-container, ul.social-container li {
    transition: width .4s ease;
}

ul.social-container .icon-placeholder,
ul.social-container .icon-link {
    transition: opacity .4s ease;
}

这就是你如何定义这些元素的转换。总是选择你实际改变的一个道具，以节省一些记忆。

ul.social-container li:hover .icon-placeholder {
    opacity: 0;
}

ul.social-container li:hover .icon-link {
    opacity: 1;
    display: inline;
}

这就是你如何隐藏 - 向你展示图标内容！

GL！

P.S。不要忘记IE8已经死了，但你仍然需要所有这些前缀（-ms，-moz，-webkit）。

Answer 2

实现这一切的更好方法是通过css动画。我为此准备了一个JSFiddle来展示主要想法：https://jsfiddle.net/uuwdr5Ly/3/

以下是使动画成为可能的css代码：

ul.social-container > li{ 
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s
    transition: all 0.4s;
    width:75px;
}

ul.social-container > li:hover {width:150px}

另外请看一下JSFiddle，因为我更改了更多的css，以使其适用于您的代码。

关于更好地编写jquery动画的方法的建议

2 个答案: