2013-03-24 41 views
2

第一次在這裏發佈,所以請原諒我,如果我有任何標記問題。我不習慣SOF框架來撰寫帖子。jQuery UI反彈(雙圖)

我試圖讓一些社交圖標在我的網站上彈跳。我從jQuery UI抓取了代碼,對它進行了測試並做了一些小的編輯,但是我遇到了一個問題,即雙頁圖像在頁面上可見。當鼠標懸停在圖像上時,會彈跳,但在彈跳圖像後面會顯示重複圖像。如果我在彈跳會話期間將鼠標移開,並且快速將鼠標懸停在圖標上方,它會正確地將圖像隱藏在後面。

那麼我該如何強制它始終隱藏背後的圖像呢?

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<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> 
<style type="text/css"> 
div { width: 32px; height: 32px; background-repeat:no-repeat; background-image: url(http://www.liquidclubs.com/assets/img/icon-fb.png); border: position: relative; } 
</style> 
<script> 
$(document).ready(function() { 

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

}); 
</script> 
</head> 
<br><br><div></div> 
</body> 
</html> 
+0

你的第一個問題:)幹得漂亮。你可能也想建立一個http://jsfiddle.net/,但這不是必需的。 – Jess 2013-03-28 02:36:10

回答

2

因爲您將圖像定義爲背景圖像。

http://jsfiddle.net/UQTY2/33/

<div> <img src="http://www.liquidclubs.com/assets/img/icon-fb.png" /></div> 

div { 
    width: 32px; 
    height: 32px; 
} 
+0

太棒了。謝謝 – Exhausted 2013-03-24 06:46:34