Hi everyone, this is my first time posting here so I apologize in advance if there are any issues with my markup. I'm still getting used to the SOF framework for writing posts.
Currently, I am working on trying to make social icons bounce on hover on my website. I found some code from jQuery UI and made a few tweaks to test it out. However, I've encountered a problem where double images are visible on the page. When I hover over the image, it bounces but simultaneously shows a duplicate image from behind. If I move the mouse away during the bouncing animation and quickly hover back over the icon, it bounces correctly, hiding the image behind.
Can anyone help me figure out how 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>
<br><br><div></div>
</body>
</html>