jquery를 사용하여 mouseover에서 소셜 공유 버튼 div를 표시하거나 숨기는 방법

Question

한 div 위로 마우스를 이동하면 숨겨진 전단 (facebook, google +, twitter) 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; 
} 

01 23,516,

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