javascript - jQuery效果后重置边距和填充

我对图像悬停时的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;
  }

这是小提琴：
https://jsfiddle.net/avm7a6oa/12/

我该如何修理？

最佳答案

您遇到的问题是由在应用position:absolute;时放置bounce的JqueryUI引起的。通过将您的img或将使反弹的元素放在带有div和正确的position:relative;的height中，可以解决此问题。

工作DEMO。