jqueryでアニメーションを切り替えます

Question

何かを達成するのに問題があります。

ソーシャルメディアのサイドバーを作成する必要があります。アイテムを押すと、バーが左から右にスライドし、詳細が表示されます。

は、ここに私の現在のコードの抜粋である例

のための写真を参照してください。

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

Answer 1

あなたはjQueryのを必要としません。マウスオーバー（hover）

で開い詳細

.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 { 
 
    \t 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>

---

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 { 
 
    \t background-color: #F4D7CB; 
 
} 
 
.icon-bar-social a:hover 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>

Answer 2

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