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

发布时间：2020-12-14 22:37:18 所属栏目：资源来源：网络整理

导读：我正在使用jQuery的 .animate() 函数来动画的宽度.当孩子很专注.但是,这会导致输入在触发事件时上下跳转.它似乎是内联块的东西. JSFiddle HTML CSS #simp-inputs div { display: inline-block; width: 15vw; margin-right: 2em;}#simp-inputs div:last-chi

我正在使用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标记不会发生这种情况.
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!