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

Question

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

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

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

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

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");