jQuery反弹效果与css样式问题

我现在有-我正在尝试创建一个“悬停”链接。（将鼠标悬停在图像上，然后将鼠标移出并等待约3秒钟，以看到它“跳回”而不是jQuery动画）

我当前的JQuery：

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

---

显示当前使用的实际css（不完美）

插入Jquery也会把事情弄得一团糟：

---

非常感谢对此事的任何评论/建议/澄清

这张图片显示了“悬停”效果：

---

可能是这样的

$（.topMenuImg”）.mouseout（函数（）{
$（this.find（'.myImg'）.stop（）.effect（“反弹”）{
方向：“向下”，
次数：3次
}, 400);
});
.topMenuImg{
浮动：左；
左缘：0.25%；
过渡：0.2s；
位置：相对位置；
显示：表格单元格；
身高：80%；
宽度：7.5%；
z指数：10；
}
.topMenuImg:悬停{
-moz变换：平移（0，-8px）；
-ms变换：平移（0，-8px）；
-o变换：平移（0，-8px）；
-webkit转换：转换（0，-8px）；
转换：转换（0，-8px）；
-webkit转换：translateY（-10px）；
转换：translateY（-10px）；
}
.topMenuImg：之后{
/*这是阴影效果*/
内容：''；
位置：绝对位置；
底部-20%；
左：4%；
z指数：0；
宽度：90px；
高度：8px；
边界半径：50%；
盒影：0px 10px 0px rgba（14,14,14,0.10）；
过渡：0.4s；
-moz变换：平移（0，-8px）；
-ms变换：平移（0，-8px）；
-o变换：平移（0，-8px）；
-webkit转换：转换（0，-8px）；
转换：转换（0，-8px）；
-webkit转换：translateY（-10px）；
转换：translateY（-10px）；
盒影：0px 10px 0px rgba（14,14,14,0.80）；
左侧填充：80px；
左边距：20px；
}
.topMenuImg:悬停：之后{
/*还有阴影效应*/
内容：''；
位置：绝对位置；
z指数：0；
底部：0%；
左：8%；
宽度：90px；
高度：8px；
边界半径：50%；
盒影：0px 10px 0px rgba（14,14,14,0.40）；
变换：比例（0.8）；
-moz变换：平移（0，4px）；
-ms变换：平移（0，4px）；
-o变换：平移（0，4px）；
-webkit转换：翻译（0，4px）；
转换：转换（0，4px）；
-webkit转换：translateY（5px）；
变换：translateY（5px）；
}


那么你什么时候需要弹跳？你想在悬停状态下只放一次吗？不，我想两者都要。悬停时，抬起，鼠标退出时，“反弹”到原始位置。感谢您的输入。我已经编辑了您对的回答，但由于阴影不太合适，仍然不完全“适合”。您希望阴影做什么？需要根据反弹的“距离”变亮/变暗-随着图像下降，阴影变暗，反之亦然。不太担心阴影的大小（如前所述），但最好让阴影变暗/变亮，使图像“反弹”
                          +------------+
+-----------+             |            |
|           |             |            |
|           |             |            |   +---+
|           |   +---+     |            |   |   |
|           |   |   |     |            |   +---+
+-----------+   +---+     +------------+

_____________   _____     ______________     _

                                             ^
                                             |
                                          hovered

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