jquery-ui效果在运行效果时改变<input>大小答案

【问题标题】：jquery-ui effect changes <input> size when running effectjquery-ui效果在运行效果时改变<input>大小
【发布时间】：2014-02-06 16:31:15
【问题描述】：

我想在输入标签上运行一个名为“shake”的 jquery-ui 效果：

$("#myInput").effect("shake");

我在包含的 css 文件中给输入标签一个新的大小：

height: 25px;
width: 250px;

效果运行良好，但是在效果期间，输入标签具有默认大小，直到效果结束。然后，它又变大了。

错误在哪里？是 jquery-ui 的 bug 吗？

效果期间的图片。

【问题讨论】：

我认为 jquery-ui 应用效果的方式存在问题，即将目标包装在临时容器 div 中。我以前也遇到过同样的问题，一直没有找到解决办法。
你能在 jsfiddle 中重现它吗...这对我来说似乎工作正常 jsfiddle.net/qhK96 在 Chrome 中。
这很奇怪，但你的小提琴有效，我看不出我的代码有什么真正的区别……但我将输入存储在一个 var 中。但我在小提琴中测试了它，它的工作原理是一样的。
你能分享你能复制它的小提琴吗？还是您说“相同”意味着工作
我认为我的小提琴没有帮助，因为我在我的文件中复制了 Danko 的小提琴并在 safari 7.0.1 和 firefox 26.0 中访问它并得到了奇怪的行为。在小提琴本身中，它就像一个魅力。当效果开始时，输入字段会换行并变成它的一半高度，即使我没有更改 css 中的默认高度。我在上面贴了一张照片。

标签： jquery css jquery-ui jquery-effects

【解决方案1】：

很可能是由于在效果期间使用了不同的 CSS 样式。请参阅http://jsfiddle.net/qhK96/1/，其中背景在摇动动画期间变为红色。

div > input /* while not in animation */

div > div > input /* while in animation due to wrapping from jQuery, like ElendilTheTall said */

解决方案很简单：修复你的 CSS。听起来有点聪明，抱歉，但我们需要更多信息来指出您的问题。首先尝试将 !important 添加到您的样式定义高度或尝试使用 line-height 设置高度。

【讨论】：

不，它不是 css。如果我什至不使用 css，问题仍然存在。我无法提供更多信息，因为小提琴代码（上面发布）在小提琴网站上有效，但当我将它复制到本地文件并在浏览器中调用它时却不行。

【解决方案2】：

我刚刚遇到了同样的问题并找到了解决方案。是的，我同意 ElendilTheTall 的观点，即只要效果正在进行，Jquery UI 就会包装目标并更改尺寸。所以，解决方案很简单。只需通过在 CSS 中添加“！important”来修复 HTML 元素的高度和宽度。只是。 Jquery UI 将无法更改尺寸。

【讨论】：