在jquery中切换动画
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在jquery中切换动画相关的知识，希望对你有一定的参考价值。
我无法实现某些目标。
我需要制作一个社交媒体栏，当我按下一个项目时，一个栏从左向右滑动，其中包含更多细节。
查看示例
这是我当前代码的片段：
.icon-bar-social {
width: 60px;
background-color: #6D565E;
position:fixed;
z-index:100;
margin-top:10px;
}
.icon-bar-social a {
display: block;
text-align: center;
padding: 6px;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar-social a:hover {
background-color: #F4D7CB;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="icon-bar-social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-phone"></i></a>
</div>答案
你不需要jQuery。比CSS更好地使用这种问题
点击打开细节（focus）
.icon-bar-social {
width: 60px;
background-color: #6D565E;
position:fixed;
z-index:100;
}
.icon-bar-social a {
display: block;
text-align: center;
color: white;
font-size: 36px;
padding:6px;
}
.icon-bar-social a span {
position: absolute;
background-color: pink;
text-align: center;
height: 55px;
width: 0px;
left: 60px;
color:#6D565E;
overflow: hidden;
margin-top:-6px;
}
.icon-bar-social a:hover {
background-color: #F4D7CB;
}
.icon-bar-social a:focus i + span {
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 1s;
animation-fill-mode: both;
}
@-webkit-keyframes example {
0% {width: 0px;}
100% {width: 200px;}
}
/* Standard syntax */
@keyframes example {
0% {width: 0px;}
100% {width: 200px;}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="icon-bar-social">
<a href="#"><i class="fa fa-facebook"></i><span>facebook</span></a>
<a href="#"><i class="fa fa-instagram"></i><span>instagram</span></a>
<a href="#"><i class="fa fa-envelope"></i><span>envelope</span></a>
<a href="#"><i class="fa fa-phone"></i><span>phone</span></a>
</div>另一答案
在跳转到jQuery之前尝试使用css。一个简单的悬停选择器可以解决您的问题。
.icon-bar-social {
width: 60px;
background-color: #6D565E;
position:fixed;
z-index:100;
}
.icon-bar-social a {
display: block;
text-align: center;
padding: 6px;
position: relative;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar-social a:hover {
background-color: #F4D7CB;
}
.icon-bar-social a span {
position: absolute;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
padding: 5px;
transition: all .25s ease-in-out;
pointer-events: none;
}
.icon-bar-social a:hover span {
opacity: 1;
left: 100%;
background-color: #F4D7CB;
pointer-events: auto;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="icon-bar-social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-phone"></i><span>555.555.5555</span></a>
</div>以上是关于在jquery中切换动画的主要内容，如果未能解决你的问题，请参考以下文章