jQuery 弹跳效果与 css 样式问题

Question

我目前有 this scenario - 我正在尝试创建一个“悬停”链接。 (将鼠标悬停在图像上，然后鼠标移开并等待约 3 秒以看到它“跳”回去而不是 jQuery 动画)

+-----------+
|  I        |
|   M       |
|     A     |    <-- image (acts as as link)
|      G    |  
|        E  |
+-----------+

 ___________    <-- shadow effect

我目前有一个 css 悬停效果，以及一个 ::after css 系统来创建这个阴影， 这意味着稍微抬高图像，缩小“阴影”的宽度，同时“减轻”阴影(哪种效果)。

我现在正尝试在鼠标离开链接时将 JQuery“弹跳”添加到组合中。但是，由于从 css 过渡，我认为不会被解雇(或者某些东西不起作用 - 无论哪种方式，它都不起作用)。

然后我遇到了确保这是动态的问题，允许将不同大小的图像用作链接(沿页面宽度的倍数)。因此，我尝试使用父级的宽度作为阴影的宽度(这不起作用，因此从这个示例中排除了 %。

完成后我的链接可能看起来像这样:

                          +------------+
+-----------+             |            |
|           |             |            |
|           |             |            |   +---+
|           |   +---+     |            |   |   |
|           |   |   |     |            |   +---+
+-----------+   +---+     +------------+

_____________   _____     ______________     _

                                             ^
                                             |
                                          hovered

我当前的 JQuery:

 $(".topMenuImg").mouseout(function () {
        $(this).effect("bounce", { times: 3 }, 'normal');
        }, function () {
            $(this).effect("bounce", { times: 3 }, 'normal');
          });

---

this显示当前使用的实际 css(不完美)。

插入 Jquery 也会把事情搞得一团糟:see here

---

非常感谢对此事的任何意见/建议/澄清。

这张图片目前显示的是“悬停”效果:

Answer 1

也许是这样的

 $(".topMenuImg").mouseout(function() {
   $(this).find('.myImg').stop().effect("bounce", {
     direction: 'down',
     times: 3
   }, 400);

 });

.topMenuImg {
  float: left;
  margin-left: 0.25%;
  transition: 0.2s;
  position: relative;
  display: table-cell;
  height: 80%;
  width: 7.5%;
  z-index: 10;
}
.topMenuImg:hover {
  -moz-transform: translate(0, -8px);
  -ms-transform: translate(0, -8px);
  -o-transform: translate(0, -8px);
  -webkit-transform: translate(0, -8px);
  transform: translate(0, -8px);
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}
.topMenuImg:after {
  /*This is the shadow effect*/
  content: '';
  position: absolute;
  bottom: -20%;
  left: 4%;
  z-index: 0;
  width: 90px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0px 10px 0px rgba(14, 14, 14, 0.10);
  transition: 0.4s;
  -moz-transform: translate(0, -8px);
  -ms-transform: translate(0, -8px);
  -o-transform: translate(0, -8px);
  -webkit-transform: translate(0, -8px);
  transform: translate(0, -8px);
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  box-shadow: 0px 10px 0px rgba(14, 14, 14, 0.80);
  padding-left: 80px;
  margin-left: 20px;
}
.topMenuImg:hover:after {
  /*Also shadow effect*/
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 0%;
  left: 8%;
  width: 90px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0px 10px 0px rgba(14, 14, 14, 0.40);
  transform: scale(0.8);
  -moz-transform: translate(0, 4px);
  -ms-transform: translate(0, 4px);
  -o-transform: translate(0, 4px);
  -webkit-transform: translate(0, 4px);
  transform: translate(0, 4px);
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<div class="topMenuImg">
  <img class="myImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRM4sZx4tVSdA8DTRHrjZ79l5yVMB5LiwsrhTClLdoxOl8LnsAnmQ" />
</div>

<br />