2013-03-24 3 views
2

Первоначальная публикация здесь, так что простите меня, если у меня есть проблемы с разметкой. Я не привык к структуре SOF для написания сообщений.jQuery UI Bounce (двойное изображение)

Я пытаюсь сделать некоторые социальные значки подпрыгивать на моем сайте при наведении. Я перехватил код из 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

Awesome. Спасибо – Exhausted

Смежные вопросы