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

Question

我有两个这样的按钮：

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

几乎像切换按钮效果，但是背景从一个滑到另一个。

此刻看起来有点奇怪！

		// Downloads page
		$(".download-tab").click(function(e) {
			e.preventDefault();
			var item = $(this).data('number');
			$('.download-tab[data-number="' + item + '"]').addClass("download-active");
			$('.downloads[data-number="' + item + '"]').show().siblings(".downloads").hide();
		});

.download-tab {
	display:inline-block;
	padding:5px 10px;
	-webkit-border-radius: 0 30px 30px 0;
	border-radius: 0 30px 30px 0;
	border:solid 3px blue;
	text-align: center;
	margin-right:-7px;
	background-color:blue;
	color:white;
	font-size:13px;
	min-width:150px;
}

.download-active {
	transition: all 0.2s ease-in-out;
	/* Old browsers */
	background: linear-gradient(to left, white 50%, blue 50%);
	background-size: 200% 100%;
	background-position:right bottom;
}

.download-active:active,
.download-active:focus {
    background-position:left bottom;
}

#download-button-1 {
	-webkit-border-radius: 30px 0 0 30px!important;
	border-radius: 30px 0 0 30px!important;
	background-color:white;
	color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="download-button-1" class="download-tab" href="#" data-number="<?php echo $count; ?>">Button 1</a>
                    <a id="download-button-<?php echo $count; ?>" class="download-tab" href="#" data-number="<?php echo $count; ?>">Button 2</a>

Answer 1

您可以使用height：0规则创建CSS类，并使用JS切换该类：

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

CSS

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

HTML：

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