如何使用JQuery懸停動畫背景圖片？

Question

我有一個以對角圖像爲背景的方形div。

當我將鼠標懸停在DIV，我想對角線背景圖像擴大，如下圖所示。

我用CSS to accomplish this，但我想過渡到動畫，而不是「捕捉」。

<div class="content-box medium-box corner"> 
    <div> 
    </div> 
</div> 

* { 
    margin: 0; 
    padding: 0; -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;} 

.content-box { 
    height: 250px; 
    width: 250px; 
    padding: 20px; 
    margin-bottom: 25px; 
    border: 1px solid #000; 
    background: url(http://keithdonegan.com/wp-content/uploads/2017/02/corner-bg.svg) 0px 0px; 
    background-size: cover; 
    transition: all .8s; 
} 

.content-box:hover { 
    background-size: 550px 550px; 
    background-position: 0px 0px; 
} 

我還要等等背景圖像動畫回到原來的位置，當光標離開股利。

Link to the test site。

任何想法？

Answer 1

你可以用純CSS過渡動畫。

說，如果有可能你的情況，我需要你的代碼。

但檢查this以獲取更多信息。

編輯：使用

background-size: 250px 250px;

，而不是蓋和maigc完成

EDIT2：

.content-box { 
    height: 250px; 
    width: 250px; 
    padding: 20px; 
    margin-bottom: 25px; 
    border: 1px solid #000; 
    background: url(http://keithdonegan.com/wp-content/uploads/2017/02/corner-bg.svg) 0px 0px; 
    background-size: 250px 250px; 
    transition: all 5s; 
} 

.content-box:hover { 
    background-size: 550px 550px; 
    background-position: 0px 0px; 
    transition: all 5s; 
} 

Answer 2

如果添加中心中心和放寬對您的動畫很好。請嘗試：

* { 
 
    margin: 0; 
 
    padding: 0; -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box;} 
 

 
.content-box { 
 
    height: 250px; 
 
    width: 250px; 
 
    padding: 20px; 
 
    margin-bottom: 25px; 
 
    border: 1px solid #000; 
 
    background: url(http://keithdonegan.com/wp-content/uploads/2017/02/corner-bg.svg) 0px 0px; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    padding: 15px; 
 
    position: relative; 
 
    -webkit-transition: all 0.8s ease 0s; 
 
    transition: all 0.8s ease 0s; 
 
} 
 

 
.content-box:hover { 
 
    background-size: 350% 350%; 
 
    background-position: 0px 0px; 
 
}

<div class="content-box medium-box corner"> 
 
    <div> 
 
    </div> 
 
</div>

Answer 3

下面是這個問題的一個純CSS的解決方案，在這個問題描述。

請注意，如果你要使用背景圖片，也可以把它分配給了::before元素，並且仍然使用相同的CSS動畫，而無需使用JS/jQuery的的...

作爲最佳實踐，總是努力保持您的HTML儘可能乾淨（沒有多餘的元素僅用於動畫......），並儘量避免加載不需要的資源（圖像，腳本）。它可以讓你的頁面更快，並且你的代碼更容易維護。

#frame { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 50px auto; 
 
    border: solid 1px red; 
 
    overflow: hidden; 
 
} 
 

 
#frame::before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: -100px; 
 
    width:100px; 
 
    height:0; 
 
    border-color: black; 
 
    border-top: solid 100px black; 
 
    border-right: solid 100px transparent; 
 
    border-bottom: none; 
 
    border-left: none; 
 
    transition: left 1s; 
 
} 
 

 
#frame:hover::before { 
 
    left: 0px; 
 
}

<div id="frame"></div>