2013-03-24 4 views
2

처음으로 글을 올리면 마크 업 문제가 있으면 용서해주세요. 나는 글쓰기를위한 SOF 프레임 워크에 익숙하지 않다.jQuery UI Bounce (double image)

나는 공중에 떠 다니는 사이트에서 소셜 아이콘이 튀어 나오려고합니다. 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

답변

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