jQuery UI CSS 스플라이트 이미지로 인한 바운스 효과

Question

jQuery UI 바운스 이펙트를 사용하여 소셜 아이콘을 바운스하려고 시도하고 있습니다. 템플리트에서 작업하고 있습니다. & jQuery의 일부 문서. 나머지는 그냥 HTML을 쓰려고 CSS & JS 그래서 나는 아마 거기에 몇 가지 오류가 있습니다. 아이콘이 튀어 오르는 데 문제가 있습니다. 사회적 아이콘에 스프라이트 이미지를 사용했기 때문에 그럴 수 있다고 생각합니다.

누군가 그것을보고 도와 줄 수 있습니까? 헤더

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"</script> 

CSS에서

JQuery와 & jQuery를 UI가 사용되고 :

#footer {background:#1c1c1c; padding:40px 0 20px; border-top:4px solid #fff;} 
#footer a {color:#fff;} 
#footer a:hover {color:#d5d5d5;} 

#footer .social-icons {float:right;} 
#footer .copyright img {float:left; margin-right:20px;} 

#footer .copyright p { 
font-size:80%; 
line-height:140%; 
} 

#footer .social-icons { } 
#footer .social-icons li.title {line-height:30px;} 
#footer .social-icons li {margin:0 0 0 10px; } 
#footer .social-icons li:first-child {margin-left:0;} 

/* social icons */ 
.social-icons {margin:0 0 20px;} 
.social-icons li {display:inline-block; margin:5px;vertical-align: middle;} 
.social-icons li a {display:inline-block; width:30px; height:30px; text-indent:-9999px;  background-image:url(../images/social-icons-sprite.png); background-repeat: no-repeat;  position:relative; background-color: #111; -webkit-border-radius:3px; -moz-border- radius:3px; border-radius:3px; 
-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o- transition: all 0.2s ease-out; transition: all 0.2s ease-out; } 
.social-icons li a:hover {background-color:#cd2122; box-shadow:0 0 6px rgba(0,0,0,0.4)} 

.social-icons li.social-twitter a {background-position:0 0;} 
.social-icons li.social-dribbble a {background-position:-30px 0;} 
.social-icons li.social-facebook a {background-position:-60px 0;} 
.social-icons li.social-envato a {background-position:-90px 0;} 

아이콘이 위치하는 곳의 HTML.

<div id="footer"> 
     <div class="row"> 
      <div class="span12"> 
       <div class="bottom fixclear"> 
        <ul class="social-icons fixclear"> 
         <li class="title">SOCIAL LOVE</li> 
         <li class="social-twitter"> 
          <a href="#">Twitter</a> 
         </li> 
        </ul> 

마지막으로 JS는 제대로 삽입하고 실행해야한다고 생각합니다.

<style type="text/css"> 
footer li.social-twitter { 
width: 32px; 
height: 32px; 
} 
</style> 
<script> 
$(document).ready(function() { 

$("div").mouseenter(function() { 
$(this).effect("bounce", { times:3 }, 270); 
}); 

}); 
</script> 

Answer 1

이 효과로 @keyframes 애니메이션을 사용할 수 있습니다.

@keyframes bounce { 
0%, 20%, 50%, 80%, 100% { 
    transform: translateY(0); 
} 
40% { 
    transform: translateY(-30px); 
} 
60% { 
    transform: translateY(-15px); 
} 
} 

체크 아웃 Animate.css 댄 에덴는 플러그를 만들고 이런 것들에 대한 아주 멋진 애니메이션 라이브러리를 재생할 수있다.

Answer 2

CSS3 만 사용하면 동일한 수신 거부 효과를 얻을 수 있습니다. @keyframes 및 animation 속성이 작업을 수행합니다. 아래의 작업 예제는 JSFiddle입니다. 각 이미지는 hover에서 바운스됩니다.