javascript - 如何在悬停中使用 velocity.js？

Question

我对使用 velocity.js 有疑问用于悬停在元素上。

目前我使用 CSS 来放大/缩小并在用户将鼠标悬停在元素上时为元素设置动画，并且我使用 velocity.js 在页面加载时初始为它们设置动画。

所以我的问题是；我应该如何使用 velocity.js 来替换这些 CSS 动画/我是否应该这样做？目前我在页面加载时使用速度，因为我确定这是它的设计目的，但它是否也适用于悬停之类的东西？

对于 jQuery，我猜这就是应用悬停效果的方式:

$("element").hover(function(){
  //Do something
});

这也是速度之类的方法吗？您只是在 jQuery 悬停函数中添加了速度代码？

感谢您的澄清；我认为这是发布此问题的合适位置，其中已经存在大量问题。

Answer 1

您可以将速度用于悬停效果。这是一个代码笔，在悬停时有 4 种不同的效果:添加一个盒子阴影，显示一个标题并为文本设置动画，还可以缩放悬停的图像，所有这些都使用 velocity.js您可以从代码中看到，例如，我使用的是 mouseenter 和 mouseleave，而不是悬停。希望这对您有所帮助!

Velocity.js Hover Codepen

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');
});
});