在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。 比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> 

---

鼠標hover打開細節（ 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 { 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>