如何在悬停中使用velocity.js?

Posted

技术标签:

【中文标题】如何在悬停中使用velocity.js?【英文标题】:How to use velocity.js in hover? 【发布时间】:2014-10-23 16:31:33 【问题描述】:

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

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

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

使用 jQuery,我猜这就是悬停效果的应用方式:

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

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

感谢您的澄清;我认为这是一个合适的地方发布这个问题已经存在相当多的问题。

【问题讨论】:

【参考方案1】:

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

Velocity.js Hover Codepen

html

   <div class="all-captions-wrap">

<figure class="caption">
  <img src="http://placehold.it/300x200" >
  <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" >
<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" >
<figcaption>
    <div class="figcaption-wrap">
    <h3>Velocity Hover</h3>

   <p>Lorem ipsum dolar.</p>
    </div>
</figcaption>
</figure>
  </div>

CSS

.all-captions-wrapmargin: 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');
);
);

【讨论】:

【参考方案2】:

对此有两种解决方案。第一个非常简单,但是如果用户快速进入和退出元素,它会产生不想要的效果。本质上,动画会循环太久;但是,如果用户随意将鼠标悬停在元素上,它就可以正常工作。

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

...

【讨论】:

【参考方案3】:

您还可以创建 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 的悬停效果

【讨论】:

以上是关于如何在悬停中使用velocity.js?的主要内容,如果未能解决你的问题,请参考以下文章

Vue中的JS与Velocity.js的结合

为 CSS/JS/jQuery 动画使用 Velocity.js 或 Transit.js?

利用velocity.js将svg动起来

使用 Velocity.js 从 URL 渲染 SVG 动画

vue里面使用Velocity.js

动画高度到自动存储高度 - 使用velocity.js的slideUp