单击按钮时，如何使用Jquery设置收缩和增长效果的动画？

如何使用jquery缩放div，并在单击按钮时显示/隐藏“登录”或“注册”

我想以此为例: 参考：

$（文档）.ready（函数（）{
$（“#登录”）。单击（函数（）{
$（“.log in”）.show（）；
$（“.register”）.hide（）；
});
$（“#注册”）。单击（函数（）{
$（“.register”）.show（）；
$（“.log in”）.hide（）；
});
});
.login寄存器{宽度：500px；显示：块；边距：0自动；}
.login注册表导航{填充：0；背景：红色；}
.login寄存器nav ul{填充：0；边距：0自动；}
.login寄存器nav ul li{显示：内联块；垂直对齐：中间；位置：相对；边距：0 10px；}
.login register nav ul li a{文本装饰：无；显示：块；填充：17px 24px；颜色：#fff；过渡：全部0.3s线性；-webkit过渡：全部0.3s线性；背景：绿色；边框半径：10px 10px 0；}
.log登录{text align:center；background:antiquewhite；}
.log输入{显示：块；边距：0自动；}
.register{文本对齐：居中；背景：antiquewhite；显示：无；}
.寄存器输入{显示：块；边距：0自动；}






$（文档）.ready（函数（）{
$（“#登录”）。单击（函数（）{
$（“.register”）.addClass（“zoomout”）；
$（“.register”）.on（“transitionend”，函数（）{
if（$（“.register”）.hasClass（“zoomout”））
$（“.login”）.removeClass（“zoomout”）；
})
});
$（“#注册”）。单击（函数（）{
$（“.log”）.addClass（“zoomout”）；
$（“.log in”）.on（'transitionend'，function（）{
if（$（“.log in”）.hasClass（“zoomout”））
$（“.register”）.removeClass（“zoomout”）；
})
});
});
。登录注册{
宽度：500px；
显示：块；
保证金：0自动；
位置：相对位置；
}
.登录注册导航{
填充：0；
背景：红色；
}
.登录注册nav ul{
填充：0；
保证金：0自动；
}
.登录注册nav ul li{
显示：内联块；
垂直对齐：中间对齐；
位置：相对位置；
利润率：0.10px；
}
.登录注册nav ul li a{
文字装饰：无；
显示：块；
填充：17px 24px；
颜色：#fff；
过渡：所有0.3s线性；
-webkit转换：所有0.3s线性；
背景：绿色；
边界半径：10px 10px 0；
}
.登录{
文本对齐：居中；
背景：古色白；
}
.登录输入{
显示：块；
保证金：0自动；
}
.登记{
文本对齐：居中；
背景：古色白；
}
.寄存器输入{
显示：块；
保证金：0自动；
}
.登录，
.登记{
过渡：均为0.5s；
变换：比例（1）；
位置：绝对位置；
左：0；
宽度：100%；
}
佐莫先生{
变换：比例（0）；
}





这就是我一直在寻找的。谢谢@repzero。（y）