javascript – jQuery .animate()导致跳转输入

前端之家收集整理的这篇文章主要介绍了javascript – jQuery .animate()导致跳转输入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用jQuery的.animate()函数来动画< div>的宽度.当孩子< input>很专注.但是,这会导致输入在触发事件时上下跳转.它似乎是内联块的东西.

JSFiddle

HTML

CSS

#simp-inputs > div {
  display: inline-block;
  width: 15vw;
  margin-right: 2em;
}

#simp-inputs > div:last-child {
  width: auto;
}

#simp-submit {
  margin-top: 65px;
}

#simp-inputs input {
  text-align: center;
}

JavaScript的

var comments = $('#simp-comments');
comments.focusin(function() {
  var div = $(this).parent().parent();
  div.animate({
      width: '30vw'
    },300);
});
comments.focusout(function() {
  var div = $(this).parent().parent(),val = $(this).val();
  if (!val.length) {
    div.animate({
        width: '15vw'
      },300);
  }
});
最佳答案
这里有一些小事在你身上起作用,造成了这种影响.

Working JSFiddle

1)有一个保证金顶部:65px;在您的提交按钮而不是其他元素.当按钮低于其他元素时,这是您遇到上下跳跃效果的第一个原因.

2)正如@smarx所提到的,jQuery正在添加overflow:hidden;对你的元素进行动画处理,因为它具有定义的overflow-x或overflow-y会导致动画出现问题.这是jQuery确保动画保持平滑的方式(在这种情况下具有讽刺意味),这是你遇到这种情况的第二个原因.您可以在其容器上强制溢出,以确保使用!important标记不会发生这种情况.

原文链接:https://www.f2er.com/html/425525.html

猜你在找的HTML相关文章