如何使左填充到右動畫與jQuery

我有一個按鈕使用此代碼如何使左填充到右動畫與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

來源

2017-05-06 Bruno Snickers

背景填充從當你將鼠標懸停左向右？或者當你點擊？ –

你想要什麼時候動畫出現？ –

也許你沒有關閉好jQuery的，它更容易只是移動一個div轉型CSS：

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

 
});

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

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

來源

2017-05-06 15:47:20 maioman

是的，我看到我們的答案是幾乎相同的:)））） – vldfr

你並不需要另一個類被放入按鈕，所以刪除JS代碼。它現在有效，希望這是你想要發生的事情。

只需將.before_bttn類重命名爲.sign_up_button類即可。

希望它有幫助！

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

來源

2017-05-06 15:48:10 vldfr

它的工作原理，但我希望它與jQUERY –

如何使左填充到右動畫與jQuery

回答

相關問題