如何使用jquery在鼠標懸停上顯示或隱藏社交分享按鈕div

Question

我正試圖解決當鼠標懸停在一個div上時如何顯示隱藏剪切（facebook，google +，twitter）div的問題。

以此爲共享一輪DIV的頂部右側的示例動畫：http://www.gethyapp.com/

請參閱我做了什麼：http://goo.gl/6XDM8
這裏是我的代碼已經完成：

HTML

<div class="share">share 
    <div class="line"></div> 
    <div class="facebook">fb</div> 
    <div class="google-plus">g+</div> 
    <div class="twitter">t</div> 
</div> 

CSS

.share{ 
    background-color: #DA251D; 
    width: 50px; 
    height: 50px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    position: relative; 
} 
.share .facebook, 
.share .google-plus, 
.share .twitter, 
.share .line { 
    display:none; 
} 
.facebook{ 
    background-color: #FFFF00; 
    width: 0px; 
    height: 0px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    opacity: 0; 

} 
.google-plus{ 
    background-color: #FFFF00; 
    width: 0px; 
    height: 0px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    opacity: 0; 

} 
.twitter{ 
    background-color: #FFFF00; 
    width: 0px; 
    height: 0px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    opacity: 0; 

} 
.line{ 
    width: 1px; 
    height: 200px; 
    background-color: #000; 
    position: absolute; 
    left: 30px; 
} 

個

JS

$(function(){ 
    $(".share").hover(function(){ 
     $(this).find(".line").delay(50).fadeIn().animate({width: 1, height: 200, opacity: 1, top:10},200); 
     $(this).find(".facebook").delay(100).fadeIn().animate({width: 32, height: 32, opacity: 1},400); 
     $(this).find(".google-plus").delay(300).fadeIn().animate({width: 32, height: 32, opacity: 1},400); 
     $(this).find(".twitter").delay(500).fadeIn().animate({width: 32, height: 32, opacity: 1},400); 
    }, function(){ 
      $(this).find(".line").delay(50).fadeIn().animate({width: 1, height: 0, opacity: 0, top:-10},200) 
      $(this).find(".facebook").delay(500).animate({width: 0, height: 0, opacity: 0},400); 
      $(this).find(".google-plus").delay(300).animate({width: 0, height: 0, opacity: 0},400); 
      $(this).find(".twitter").delay(100).animate({width: 0, height: 0, opacity: 0},400); 
    }); 
}); 

我怎樣才能使它所以當你將鼠標懸停在分享框旁邊會顯示其他剪切框？

Answer 1

我訪問了您提到的網站。參照該網站我已經採取了代碼，這樣做的動畫作爲

<style type="text/css"> 
    #share 
    { 
     display: none; 
     position: absolute; 
     right: 65px; 
     top: 20px; 
     line-height: 46px; 
     padding-right: 59px; 
    } 
    #share .list 
    { 
     position: absolute; 
     top: 0; 
     right: 0; 
     background: transparent; 
    } 
    #share .list strong, #share .list a 
    { 
     position: relative; 
     display: block; 
     width: 46px; 
     height: 46px; 
     font-size: 30px; 
     font-weight: normal; 
     text-align: center; 
     -webkit-border-radius: 23px; 
     -moz-border-radius: 23px; 
     border-radius: 23px; 
     background: #fff; 
     color: #3fbad8; 
     margin: 0 0 6px; 
     font-family: 'icomoon'; 
    } 
    #share .list strong 
    { 
     cursor: default; 
    } 
    .ie9 #share .list strong 
    { 
     padding-top: 5px; 
     height: 41px; 
    } 
    #share .list strong span 
    { 
     position: absolute; 
     top: 100%; 
     left: 50%; 
     width: 1px; 
     height: 0; 
     background: #fff; 
     -webkit-transition: height .0001s linear; 
     -moz-transition: height .0001s linear; 
     -ms-transition: height .0001s linear; 
     -o-transition: height .0001s linear; 
     transition: height .0001s linear; 
     opacity: 0; 
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
    } 
    #share .list a 
    { 
     background: #ff3; 
     color: #000; 
     -webkit-transition: -webkit-transform .0001s linear, background .0001s ease, color .0001s ease; 
     -moz-transition: -moz-transform .0001s linear, background .0001s ease, color .0001s ease; 
     -ms-transition: -ms-transform .0001s linear, background .0001s ease, color .0001s ease; 
     -o-transition: -o-transform .0001s linear, background .0001s ease, color .0001s ease; 
     transition: transform .0001s linear,background .0001s ease,color .0001s ease; 
     -webkit-transform: scale(0) translate3d(0,0,0); 
     -moz-transform: scale(0) translate3d(0,0,0); 
     -ms-transform: scale(0) translate3d(0,0,0); 
     -o-transform: scale(0) translate3d(0,0,0); 
     transform: scale(0) translate3d(0,0,0); 
     opacity: 0; 
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
    } 
    #share .list a:hover 
    { 
     background: #000; 
     color: #fff; 
     text-decoration: none; 
    } 
    #share .list .tw 
    { 
     font-size: 18px; 
    } 
    #share .list .fb 
    { 
     font-size: 32px; 
    } 
    #share .list .gp 
    { 
     font-size: 32px; 
    } 
    #share .list:hover strong span, #share .list.hover strong span 
    { 
     height: 135px; 
     opacity: 1; 
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
     -webkit-transition-duration: .3s; 
     -moz-transition-duration: .3s; 
     -ms-transition-duration: .3s; 
     -o-transition-duration: .3s; 
     transition-duration: .3s; 
    } 
    #share .list:hover a, #share .list.hover a 
    { 
     -webkit-transform: scale(1) translate3d(0,0,0); 
     -moz-transform: scale(1) translate3d(0,0,0); 
     -ms-transform: scale(1) translate3d(0,0,0); 
     -o-transform: scale(1) translate3d(0,0,0); 
     transform: scale(1) translate3d(0,0,0); 
     opacity: 1; 
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
     -webkit-transition-duration: .3s,.4s,.4s; 
     -moz-transition-duration: .3s,.4s,.4s; 
     -ms-transition-duration: .3s,.4s,.4s; 
     -o-transition-duration: .3s,.4s,.4s; 
     transition-duration: .3s,.4s,.4s; 
    } 
    #share .list:hover .tw, #share .list.hover .tw 
    { 
     -webkit-transition-delay: .1s,.0001s,.0001s; 
     -moz-transition-delay: .1s,.0001s,.0001s; 
     -ms-transition-delay: .1s,.0001s,.0001s; 
     -o-transition-delay: .1s,.0001s,.0001s; 
     transition-delay: .1s,.0001s,.0001s; 
    } 
    #share .list:hover .fb, #share .list.hover .fb 
    { 
     -webkit-transition-delay: .2s,.0001s,.0001s; 
     -moz-transition-delay: .2s,.0001s,.0001s; 
     -ms-transition-delay: .2s,.0001s,.0001s; 
     -o-transition-delay: .2s,.0001s,.0001s; 
     transition-delay: .2s,.0001s,.0001s; 
    } 
    #share .list:hover .gp, #share .list.hover .gp 
    { 
     -webkit-transition-delay: .3s,.0001s,.0001s; 
     -moz-transition-delay: .3s,.0001s,.0001s; 
     -ms-transition-delay: .3s,.0001s,.0001s; 
     -o-transition-delay: .3s,.0001s,.0001s; 
     transition-delay: .3s,.0001s,.0001s; 
    } 
</style> 

<p id="share" style="opacity: 1; display: block;"> 
    Want Solution <span class="list"><strong>?? <span></span> 
    </strong><a class="tw">twr</a> <a class="fb">fb</a> <a class="gp">G+</a> </span> 
</p> 

這是完全一樣的動畫，所不同的品牌/網站的標誌點。 與鏈接中的代碼相同。

請一看，希望幫助這是你想要的。

謝謝 Prashant