如何使用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课程。

希望它有所帮助！

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许你在没有jquery的情况下会更好，在css中转换div会更容易：

＆＃13;

＆＃13;

$('.sign_up_button').one('mouseover',  function(event) {
  $('body').append('you don\'t need jquery');

});

＆＃13;

.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: red;
  top: 0;
  right: 100%;
  bottom: 0;
  z-index: -1;
  position: absolute;
  left: 0;
  -webkit-transition: right .3s ease-in;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;