jquery效果后边距和填充重置答案

【问题标题】：Margin and padding reset after jquery effectjquery效果后边距和填充重置
【发布时间】：2016-10-28 01:17:04
【问题描述】：

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

我该如何修复这个问题？

【问题讨论】：

你能发布一些 html 和 css 吗？如果你在 jsfiddle.net 中构建一个简单的演示会更好
已编辑。我在 jsfiddle jqueryUI 中找不到...
感谢编辑。（只是为了让您知道）jsfiddle.net 是一个网站，您可以在其中构建演示，也可以从 javascript 选项中添加 jquery 或 jqueryUi。
好的，我找到了如何添加 jQueryUI。 :)

标签： javascript jquery effect

【解决方案1】：

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

工作DEMO。

【讨论】：

我还有一个问题。现在我正在使用抖动效果。现在我的两个图像粘在一起。我必须使用宽度而不是高度？
我不太了解中继 jqueryUI 效果，但我认为它会起作用。

【解决方案2】：

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

【讨论】：