将显示/隐藏功能修改为仅缩放宽度，而不是高度？

Question

正如标题所暗示的那样，我正在使用jQuery的show和hide函数来隐藏和显示元素。但是，我不想缩放元素的高度，只是宽度。

我正在考虑使用动画功能，但我不确定这是否是最好的方法。

另外，我不想在javascript中设置高度，因为它可能会在标记中发生变化。

理想情况下，我想要发生的是当调用函数隐藏元素时，对象的宽度从它的原始宽度变为0并且它的alpha降为0然后当我告诉它显示时会发生相反的情况。 / p>

Answer 1

您想要使用animate功能：

$("div.myElement").animate({width: "toggle"});

动画节目和隐藏方法大多是虚荣方法，显示漂亮的动画。通常，您将要自定义效果。您也可以尝试：

$("div.myElement").animate({width: "toggle", opacity: "toggle"});

具有相当广泛和淡入效果。如果你发现自己一遍又一遍地使用这些动画，你可以将它们包装在一个新的jQuery方法中：

$.fn.myShow = function(duration) {
  return this.animate({width: "toggle", opacity: "toggle"}, duration || 1000);
});

$("div.myElement").myShow("slow");