如何在悬停中使用velocity.js？ [英] How to use velocity.js in hover?

问题描述

我有一个关于使用 velocity.js 悬停在元素上的问题。

目前我使用CSS放大/缩小和当用户悬停在他们身上时动画元素，我使用velocity.js最初在页面加载时动画。

示例： https://www.pandoragaming.net/

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

使用jQuery， （猜测这是如何应用悬停效果）：

  $（element）。hover（function（）{
 //做某事
}）; 
  

这是怎么做的呢？您只需在jQuery悬停功能中添加速度代码？

感谢您的任何澄清;我认为这是一个适当的地方，可以在这个问题上提出相当数量的问题。

悬停效果。下面是一个有4种不同悬停效果的codepen：
添加了一个boxshadow，显示了一个标题并为文字设置了动画，并且缩放了图像，所有使用velocity.js
您可以从代码中看到，例如，我使用mouseenter和mouseleave，而不是悬停。
希望这会有所帮助！

Velocity。 js Hover Codepen

html

 < div类=全字幕缠绕> 
 
< figure class =caption> 
< img src =http://placehold.it/300x200alt => 
< 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/300x200alt => 
< 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/300x200alt => 
< 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）; 
颜色：白色; 
填充：1rem; 
} 
 .caption figcaption h3 {
 font-size：1.2rem; 
 margin：20px; 
} 
 .caption figcaption p {
 margin：20px; 
} 
 .caption {
 position：relative; 
} 
 .caption figcaption {
 position：absolute; 
宽度：100％; 
} 
 .caption figcaption {
 bottom：0; 
剩下：0; 
 opacity：0; 
宽度：100％; 
身高：100％; 
} 
 .figcaption-wrap {
 margin-top：20％; 
 display：none; 
 
  

Javascript

<$ p （）函数（）{
$（this）$ {code $> $（document）.ready（function（）{

$（'。caption' .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（） {
$ b $（'。hover，.hover figcaption，.hover .figcaption-wrap，.hover img'）。velocity（stop）;
$（'。hover ,. hover img'）。velocity（'reverse'）;
$（this）.removeClass（'hover'）;
}）;
}）;

I have a question about using velocity.js for hovering on elements.

Currently I use CSS to zoom in/out and animate elements when users hover on them, and I use velocity.js to animate them initially on page load.

Example: https://www.pandoragaming.net/

So my question is; how should I be using velocity.js to replace these CSS animations/should I at all? Currently I use velocity on page load as I'm sure that's what it was designed for, but was it also intended for use with things like hover?

With jQuery I'm guessing this is how a hover effect would be applied:

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

Is this how it's done with something like velocity too? You just add the velocity code in the jQuery hover function?

Thanks for any clarification; I thought this was an appropriate place to post this with a decent number of questions on it already existing.

解决方案

You can use velocity for hover effects. Here is a codepen with 4 different effects on hover: adds a boxshadow, shows a caption and animates the text and also scales the image hovered,all using velocity.js You can see from the code that, for they example, I am using mouseenter and mouseleave, not hover. Hope this helps!

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

这篇关于如何在悬停中使用velocity.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！