我有一個按鈕使用此代碼如何使左填充到右動畫與jQuery
$("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
背景填充從當你將鼠標懸停左向右?或者當你點擊? –
你想要什麼時候動畫出現? –