jQuery UI彈跳效果與CSS雪碧圖像

我試圖讓我的社交圖標反彈使用jQuery UI彈跳效果。我正在關閉一個模板& jQuery的一些文檔。其餘的即時只是試圖寫自己的HTML，CSS & JS，所以我可能在那裏有一些錯誤。我有一個問題讓圖標反彈。我認爲這可能是因爲即時通訊使用社交圖標的精靈圖像。jQuery UI彈跳效果與CSS雪碧圖像

有人可以看看它並幫助我嗎？

jQuery的& jQuery的用戶界面在頭

<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被使用：

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

來源

2013-03-24 Exhausted

也許你可以在[jsfiddle]（http://jsfiddle.net/）上創建一個例子嗎？ – 2013-03-24 23:36:00

http://jsfiddle.net/WFEDH/ ...張貼更多的代碼將幫助我們回答這個問題.... – 2013-03-24 23:36:53

此外，這是jQuery的舊版本。你是否因任何理由限制使用1.5？ – 2013-03-24 23:38:09

您可以爲此效果使用@keyframes動畫。

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

退房Animate.css丹伊甸園創造了一個即插即用的動畫庫，這樣的事情非常酷。

來源

2013-03-25 01:19:36 apaul

您只能使用CSS3實現相同的彈跳效果。 @keyframes和animation屬性將完成這項工作。這裏是JSFiddle的工作示例。每張圖片在hover上彈跳。

來源

2013-06-28 08:25:16

jQuery UI彈跳效果與CSS雪碧圖像

回答

相關問題