javascript - 如何用Jquery制作从左到右的填充动画

Question

我有一个带有这段代码的按钮

$("body").on('mouseover', '.sign_up_button', function(event) {
  $(this).toggleClass('before_bttn');
});

.sign_up_button {
  -webkit-transition: .3s ease-out;
  -moz-transition: .3s ease-out;
  -ms-transition: .3s ease-out;
  -o-transition: .3s ease-out;
  transition: .3s ease-out;
  font-size: 21px;
  font-family: Zona;
  color: whitesmoke;
  border: 0;
  position: relative;
  top: 50px;
  height: 50px;
  left: 120px;
  letter-spacing: 1px;
  background: #1ed5a3;
  cursor: pointer;
  width: 140px;
  overflow: hidden;
  z-index: 1;
}

.before_bttn:before {
  content: "";
  background: #49d6a7;
  top: 0;
  right: 100%;
  bottom: 0;
  z-index: -1;
  position: absolute;
  left: 0;
  -webkit-transition: right .3s ease-in;
}

.before_bttn:hover:before {
  right: 0;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sign_up_button">Sign Up</button>

我在这里尝试做的是创建从左到右填充背景的动画，但不幸的是结果如下:https://jsfiddle.net/qantsvg5/鼠标离开按钮后会发生动画。如何使用 Jquery 创建该动画？不要提供没有 css 的方法

Answer 1

您不需要将另一个类放入按钮中，因此删除 JS 代码。现在可以使用了，希望这就是您想要的结果。

只需将 .before_bttn 类重命名为 .sign_up_button 类。

希望对您有所帮助!

.sign_up_button{
	-webkit-transition:.3s ease-out;
	   -moz-transition:.3s ease-out;
	    -ms-transition:.3s ease-out;
	     -o-transition:.3s ease-out;
	        transition:.3s ease-out;
	font-size: 21px;
	font-family: Zona;
	color: whitesmoke;
	border:0;
	position: relative;
	top: 50px;
	height: 50px;
	left: 120px;
	letter-spacing: 1px;
	background: #1ed5a3;
	cursor:pointer;
	width: 140px;
	overflow: hidden;
	z-index: 1;
}
.sign_up_button:before{
	content: "";
	background: #49d6a7;
	top: 0;
	right: 100%;
	bottom: 0;
    z-index: -1;
  	position: absolute;
	left: 0;
  transition:right .3s ease-in;
	-webkit-transition:right .3s ease-in;
}
.sign_up_button:hover:before{
	right:0;
	color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sign_up_button">Sign Up</button>