Javascript 如何在悬停中使用velocity.js？_Javascript_Jquery_Hover_Jquery Hover_Velocity.js

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

javascript jquery

Javascript 如何在悬停中使用velocity.js？,javascript,jquery,hover,jquery-hover,velocity.js,Javascript,Jquery,Hover,Jquery Hover,Velocity.js,我有一个关于在元素上悬停的问题目前，当用户将鼠标悬停在元素上时，我使用CSS放大/缩小元素并为其设置动画，最初在页面加载时，我使用velocity.js为其设置动画所以我的问题是,；我应该如何使用velocity.js替换这些CSS动画/我应该怎么做？目前，我在页面加载中使用velocity，因为我确信这就是它的设计目的，但它是否也适用于像hover这样的东西对于jQuery，我猜这就是悬停效果的应用方式： $("element").hover(function(){ //Do som

我有一个关于在元素上悬停的问题

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

所以我的问题是,；我应该如何使用velocity.js替换这些CSS动画/我应该怎么做？目前，我在页面加载中使用velocity，因为我确信这就是它的设计目的，但它是否也适用于像hover这样的东西

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

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

速度也是这样的吗？您只需在jQuery悬停函数中添加velocity代码

感谢您的澄清；我认为这是一个合适的地方来发布这篇文章，上面已经有很多问题了。

你可以使用速度来实现悬停效果。这是一个代码笔，在悬停时有4种不同的效果：添加boxshadow，显示标题，设置文本动画，并缩放悬停的图像，所有操作都使用velocity.js 您可以从代码中看到，例如，我使用的是mouseenter和mouseleave，而不是hover。希望这有帮助

html

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

有两种解决方案。第一种方法非常简单，但如果用户快速进入和退出元素，则会产生不必要的效果。本质上，动画将循环太长时间；但是，如果用户随意地将鼠标悬停在元素上，它就可以正常工作

另一种解决方案更为健壮，可以从用户那里获得异常快速的“悬停切换”。如果用户快速将鼠标悬停在元素内外，此解决方案将停止并反转动画。这就是我在任何悬停状态下使用的速度

下面是使用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来设置事物的动画，并在mouseout时反转

<!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>


无标题文件
#mydiv{
不透明度：0.5；
}
一些文本
$（“#mydiv”）。悬停（onOver，onOut）；
函数onOver（）{
$（“mydiv”）
.速度（{标度：[1,0.9]}）；
}
函数onOut（）{
$（“mydiv”）
.速度（“反向”）；
}

这对我来说适用于速度悬停效果

...

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

...

<!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>