JS .show .hide方向

Question

我有这个功能：

$('.Show').click(function() {
    $('#mobile-nb-c').show(500);
    $('.Show').hide(500);
    $('.Hide').show(500);
});

此功能以如下方式打开我的div：

但是我希望它像这样打开：

可以做到吗？

Answer 1

show()和hide()都没有与之相关的任何动画属性。他们只会隐藏或显示一个元素。您可以使用.animate()来使用各种动画

Answer 2

尝试一下：

$('.Show').animate({ width: <yourWidth> }, 600)
$('.Hide').animate({ width: 0 }, 600)