jQuery UI 弹跳（双图）答案

【问题标题】：jQuery UI Bounce (double image)jQuery UI 弹跳（双图）
【发布时间】：2013-03-13 19:17:33
【问题描述】：

第一次在这里发帖，如果我有任何标记问题，请原谅我。我不习惯 SOF 框架来写帖子。

我正在尝试让一些社交图标在悬停时在我的网站上弹跳。我从 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>

【问题讨论】：

第一个问题做得很好:)。您可能还想设置一个jsfiddle.net，但这不是必需的。

标签： javascript jquery css user-interface bounce

【解决方案1】：

因为您将图像定义为背景图像。

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

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

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

【讨论】：