Javascript 在jquery中切换动画

我在做某事时遇到了困难

我需要制作一个社交媒体侧栏，当我按下一个项目时，一个栏会从左向右滑动，其中包含更多细节

参见图片中的示例

以下是我当前代码的片段：

。图标栏社交{
宽度：60px；
背景色：#6D565E；
位置：固定；
z指数：100；
边缘顶部：10px；
}
.图标栏a{
显示：块；
文本对齐：居中；
填充：6px；
过渡：所有0.3秒缓解；
颜色：白色；
字体大小：36px；
}
.图标栏a:悬停{
背景色：#F4D7CB；
}

---

您不需要jQuery。使用此类问题比使用CSS更好

---

单击打开详细信息（

焦点

）

。图标栏社交{
宽度：60px；
背景色：#6D565E；
位置：固定；
z指数：100；
}
.图标栏a{
显示：块；
文本对齐：居中；
颜色：白色；
字体大小：36px；
填充：6px；
}
.图标栏社会跨度{
位置：绝对位置；
背景颜色：粉红色；
文本对齐：居中；
高度：55px；
宽度：0px；
左：60px；
颜色：#6D565E；
溢出：隐藏；
利润上限：-6px；
}
.图标栏a:悬停{
背景色：#F4D7CB；
}
.图标栏社交a：焦点i+span{
-webkit动画名称：示例；/*Safari 4.0-8.0*/
-webkit动画持续时间：1s；/*Safari 4.0-8.0*/
动画名称：示例；
动画持续时间：1s；
动画填充模式：两者都有；
}
@-webkit关键帧示例{
0%{宽度：0px；}
100%{宽度：200px；}
}
/*标准语法*/
@关键帧示例{
0%{宽度：0px；}
100%{宽度：200px；}
}

---

在跳转到jQuery之前尝试使用css。一个简单的悬停选择器应该可以解决您的问题

。图标栏社交{
宽度：60px；
背景色：#6D565E；
位置：固定；
z指数：100；
}
.图标栏a{
显示：块；
文本对齐：居中；
填充：6px；
位置：相对位置；
过渡：所有0.3秒缓解；
颜色：白色；
字体大小：36px；
}
.图标栏a:悬停{
背景色：#F4D7CB；
}
.图标栏社会span{
位置：绝对位置；
不透明度：0；
排名：0；
左：0；
底部：0；
填充物：5px；
过渡：所有.25秒轻松进出；
指针事件：无；
}
.图标栏a：悬停范围{
不透明度：1；
左：100%；
背景色：#F4D7CB；
指针事件：自动；
}

Java？还是JavaScript？我想更可能的是最近你为了达到这个效果做了什么？到目前为止，您所展示的唯一代码是无细节的显示，正如Robert所说，您在这里要求的很多，到目前为止，您所展示的只是一个没有任何逻辑的模板。试着先自己实现一些逻辑。我试过了，它不起作用，我甚至不能得到图标旁边的文本。这就是我在这里寻求帮助的原因。虽然它在hover上工作，但我很好奇，如果这是通过单击社交图标完成的，那么它是否可以在没有

jquery/javascript

的情况下完成。在这种情况下，我可以删除我的答案，Nice work@Farhad刚刚看到了编辑+1仅适用于css方法。投票通过这个答案,，和删除我的答案。不客气，兄弟，一个更好的答案应该毫不犹豫地感谢你：）这是一个很好的解决方案。你的答案只适用于

手机

，而不适用于所有社交图标，OP希望点击图标而不是将鼠标悬停在图标上。