Jquery 单击后，将背景颜色从一个按钮滑动到另一个按钮

我有两个这样的按钮：

活动状态是白色背景，因此当单击第二个按钮时，我希望白色背景从左向右滑动，使第二个按钮为白色，第一个按钮为蓝色。然后在单击第一个按钮时反转效果。可能吗

几乎像一个切换按钮的效果，但背景幻灯片从一个到另一个

现在看起来有点奇怪

//下载页面
$（“.download tab”）。单击（函数（e）{
e、 预防默认值（）；
var item=$（this.data（'number'）；
$（'.download选项卡[数据编号='+item+''“]'）。addClass（“下载活动”）；
$（'.downloads[data number=“'+item+'”]）.show（）.sides（“.downloads”）.hide（）；
});
。下载选项卡{
显示：内联块；
填充物：5px10px；
-webkit边界半径：0 30px 30px 0；
边界半径：0 30px 30px 0；
边框：纯色3px蓝色；
文本对齐：居中；
右边距：-7px；
背景颜色：蓝色；
颜色：白色；
字体大小：13px；
最小宽度：150px；
}
.下载活动{
过渡：所有0.2秒缓进缓出；
/*旧浏览器*/
背景：线性梯度（向左，白色50%，蓝色50%）；
背景大小：200%100%；
背景位置：右下角；
}
.下载活动：活动，
.下载活动：焦点{
背景位置：左下；
}
#下载按钮-1{
-webkit边界半径：30px 0 30px！重要；
边界半径：30px 0 0 30px！重要；
背景色：白色；
颜色：蓝色；
}
您可以使用height:0规则创建CSS类，并使用JS:

var elem = document.getElementById("box");
function slide() {
elem.classList.toggle('hide');
}

CSS

HTML:

滑动切换
显示/隐藏

.box {
width: 400px;
height: 400px;
overflow: hidden;
background: orange;
margin: 0 auto;
transition: all 0.4s ease-in-out;
}
.hide {
height: 0;
}

<button onclick="slide();">Slide Toggle</button>
<div id="box" class="box">Show / Hide</div>