Question

我目前有this scenario - 我正在尝试创建一个“悬停”链接。（将鼠标悬停在图像上，然后鼠标悬停并等待~3秒，看看它'跳回'而不是jQuery动画）

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

 ___________    <-- shadow effect

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

当鼠标离开链接时，我现在正尝试在混合中添加JQuery'Bounce'。但是，由于从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 />

jQuery弹跳效果与css样式问题

1 个答案: