2

First time posting here so do forgive me if I have any markup issues. I'm not used to the SOF framework for writing posts.

I'm trying to make some social icons bounce on my site on hover. I grabbed the code over from jQuery UI to test it out and made some small edits, however I'm running into a problem with double images being visible on the page. When the mouse hovers over the image it bounces but a duplicate is visible from behind the bouncing image. If I move the mouse away during the bouncing session and quickly hover back over the icon it bounces correctly hiding the image behind.

So how can I force it to consistently hide the image behind?

<!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>
Jess
  • 23,901
  • 21
  • 124
  • 145
Exhausted
  • 179
  • 2
  • 5
  • 19
  • Nice job on your first question :). You may want to also set up a http://jsfiddle.net/, but that is not necessary. – Jess Mar 28 '13 at 02:36

1 Answers1

2

Because you are defining the image as background image.

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

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

div {
    width: 32px;
    height: 32px;
}
sdespont
  • 13,915
  • 9
  • 56
  • 97