我有一个关于使用velocity.js 将鼠标悬停在元素上的问题。
目前，当用户将鼠标悬停在元素上时，我使用 CSS 来放大/缩小元素并为其设置动画，并且我使用velocity.js 最初在页面加载时为它们设置动画。
所以我的问题是；我应该如何使用velocity.js来替换这些CSS动画/我应该怎么做？目前我在页面加载时使用速度，因为我确信这是它的设计目的，但它是否也适用于悬停之类的东西？
使用 jQuery，我猜这就是悬停效果的应用方式：
$("element").hover(function(){
//Do something
});
这也是速度之类的方法吗？你只是在jQuery悬停函数中添加速度代码？
感谢您的澄清；我认为这是一个合适的地方发布这个问题已经存在相当多的问题。
【问题讨论】：
标签： javascript jquery hover jquery-hover velocity.js
您可以将速度用于悬停效果。这是一个对悬停有 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 的 javascript 代码
...
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
...
【讨论】：
您还可以创建 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>
这适用于 Velocity 的悬停效果
【讨论】：