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

Question

顾名思义，我使用jQuery的show和hide函数来隐藏和显示元素。但是，我不想缩放元素的高度，只想缩放元素的宽度。

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

此外，我不希望在javascript中设置高度，因为它可能会在标记中更改。

理想情况下，我希望发生的情况是，当调用函数隐藏一个元素时，对象的宽度从原来的宽度变为0，它的alpha下降到0，然后当我告诉它显示时，会发生相反的情况。

Answer 1

您想要使用动画功能：

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