我有一個關於使用velocity.js懸停在元素上的問題。如何在懸停中使用velocity.js？
當前我使用CSS放大/縮小和當用戶將鼠標懸停在它們上時動畫元素，並且我使用velocity.js在頁面加載時對它們進行初始動畫處理。
例子：https://www.pandoragaming.net/
所以我的問題是;我應該如何使用velocity.js來替換這些CSS動畫/我應該根本嗎？目前我在頁面加載時使用速度，因爲我確定這是它的設計目的，但它是否也用於懸停之類的事情？
使用jQuery我猜這是怎樣一個懸停效果將被應用：
$("element").hover(function(){
//Do something
});
這是它如何與類似的速度太做了什麼？您只需在jQuery懸停功能中添加速度代碼？
感謝您的任何澄清;我認爲這是一個適當的地方，可以在其上面發佈相當多的問題。
您可以將速度用於懸停效果。這裏是一個有4種不同的懸停效果的代碼簿： 添加了一個boxshadow，顯示了一個標題和動畫文本，還縮放了圖像，所有使用velocity.js 您可以從代碼中看到，例如，我是使用mouseenter和mouseleave，而不是懸停。 希望這有助於！
HTML
<div class="all-captions-wrap">
<figure class="caption">
<img src="http://placehold.it/300x200" alt="">
<figcaption>
<div class="figcaption-wrap">
<h3>Velocity Hover</h3>
<p>Lorem ipsum dolar.</p>
</div>
</figcaption>
</figure>
<figure class="caption">
<img src="http://placehold.it/300x200" alt="">
<figcaption>
<div class="figcaption-wrap">
<h3>Velocity Hover</h3>
<p>Lorem ipsum dolar.</p>
</div>
</figcaption>
</figure>
<figure class="caption">
<img src="http://placehold.it/300x200" alt="">
<figcaption>
<div class="figcaption-wrap">
<h3>Velocity Hover</h3>
<p>Lorem ipsum dolar.</p>
</div>
</figcaption>
</figure>
</div>
CSS
.all-captions-wrap{margin: 0 auto;text-align:center;}
.caption {
float: left;
overflow: hidden;
width: 300px;
margin: 15px;
}
.caption img {
width: 100%;
display: block;
}
.caption figcaption {
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 1rem;
}
.caption figcaption h3 {
font-size: 1.2rem;
margin: 20px;
}
.caption figcaption p {
margin: 20px;
}
.caption {
position: relative;
}
.caption figcaption {
position: absolute;
width: 100%;
}
.caption figcaption {
bottom: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
}
.figcaption-wrap {
margin-top:20%;
display: none;
}
的Javascript
$(document).ready(function() {
$('.caption').mouseenter(function() {
$(this).addClass('hover');
$('.hover').velocity({boxShadowBlur:15},{
duration: 50
});
$('.hover img').velocity({scale:1.25},{
duration: 200
});
$('.hover figcaption').velocity('transition.perspectiveLeftIn', {delay:200});
$('.hover .figcaption-wrap').velocity('transition.perspectiveRightIn', {delay:300});
}).mouseleave(function() {
$('.hover,.hover figcaption,.hover .figcaption-wrap, .hover img').velocity("stop");
$('.hover,.hover figcaption,.hover .figcaption-wrap, .hover img').velocity('reverse');
$(this).removeClass('hover');
});
});
這有兩種解決方案。第一個非常簡單，但是如果用戶快速進入和退出元素，它會產生不希望的效果。實質上，動畫將循環太久;然而，如果用戶隨意懸停在元素上，它就可以工作。
Here's a demo with that solution。
另一種解決方案更強大，並且解決了用戶異常快速的「懸停切換」問題。如果用戶快速移入和移出元素，則此解決方案會停止並反轉動畫。這就是我用速度懸停的狀態。
You can view that solution here。
下面是使用JQuery
...
var svg = $('.curtain');
var path = svg.find('path'); // define svg path
path.data({animating:false}); // add data for animation queue purposes
path.hover(function() { // mouse enter
/*
if the path is in the middle of an animation, stop it immediately and reverse the animation. This prevents many unwanted animations if the user hovers in and out quickly
*/
if (path.data('animating') === true){
path.velocity("stop", true).velocity('reverse',{ duration:300});
path.data({animating:false});
} else { // begin default animation
$(this).velocity({fill: '#ffcc00'},{
duration:500,
begin: function(){
path.data({animating:true});
},
complete: function(){
path.data({animating:false});
}
});
} // end of conditional statement
}, function() { // mouse exit
/*
if the path is in the middle of an animation, stop it immediately and reverse the animation. This prevents many unwanted animations if the user hovers in and out quickly
*/
if (path.data('animating') === true){
path.velocity("stop", true).velocity('reverse',{ duration:300});
path.data({animating:false});
} else { // begin default animation
$(this).velocity({fill: '#000'},{
duration:500,
begin: function(){
path.data({animating:true});
},
complete: function(){
path.data({animating:false});
}
});
} // end of conditional statement
}); // end of hover function
...
JavaScript代碼也可以創建onHover選項動畫的東西，鼠標移開時逆轉。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<style type="text/css">
#mydiv {
opacity: 0.5;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
</head>
<body>
<div class="container" style="margin-top:5em;">
<div class="row">
<div class="col-lg-12" id="mydiv" style="border:1px red dashed;">
<h1>Some Text</h1>
</div>
</div>
</div>
<script type="text/javascript">
$("#mydiv").hover(onOver,onOut);
function onOver(){
$("#mydiv")
.velocity({scale: [1, 0.9]});
}
function onOut(){
$("#mydiv")
.velocity("reverse");
}
</script>
</body>
</html>
這對我的作品與速度
懸停效果