jquery 效果后边距和填充重置

Question

我对图像悬停的 jquery 效果有疑问。在图像上悬停几次之前，它看起来像这样：

将我的图片悬停在按钮上后，如下所示：

这是我的 JS：

//For animate images in skills
$('.skills, .contact').find('img').hover(function(){
   $(this).finish().effect("bounce",1000);
}); //End of hover() animate

HTML:

<div class="row future hideme">
  <div class="col-lg-3 col-xs-4 col-lg-offset-1">
    <img src="images/angular.png" alt="AngularJS" title="AngularJS">
  </div>
</div>
<a href="#projects"><button name="projects" class="hideme">Check my projects</button></a>

CSS:

.hideme { opacity: 0; }
.row { margin: 0 0 0 350px; }

  .future {
    margin: 0 0 50px 500px;
  }

  button {
    background: none;
    outline: none;
    border: 1px solid #D4DFE6;
    padding: 13px;
    border-radius: 5%;
    padding: 50px 0 0 0 0;
  }

这里是 fiddle： https://jsfiddle.net/avm7a6oa/12/

我该如何修复？

Answer 1

反弹动画使图像处于 absolute 位置，因此边距不再影响其他元素。

Answer 2

您遇到的问题是由 JqueryUI 在您应用 bounce 时放置 position:absolute; 引起的。这可以通过将您的 img 或将在 div 内反弹的元素与 position:relative; 和正确的 height

来解决

工作DEMO。

jquery 效果后边距和填充重置

Margin and padding reset after jquery effect

javascript

jquery

effect