Javascript JS/jQuery：悬停触发的反向动画？_Javascript_Jquery_Html_Css_Animation

Javascript JS/jQuery：悬停触发的反向动画？

javascript jquery html css animation

Javascript JS/jQuery：悬停触发的反向动画？,javascript,jquery,html,css,animation,Javascript,Jquery,Html,Css,Animation,当我第一次看到jQuery的.animate函数时，我非常激动。但是，如果我（例如）在启用此功能的情况下更改长方体的颜色。mouseover，它将（当然）完成动画，尽管鼠标已经离开长方体，并且调用了另一个反转颜色的动画。mouseleave 例如，如果您将鼠标悬停在长方体上多次，并且动画重复20次或更多，则会导致拍打若要停止动画/若鼠标不再在方框上，则要反转颜色更改，您可以使用已提出的此问题的功能组合：下面是针对类似动画的此问题的示例代码：这似乎不是很优雅和复杂。是否有类似于.animat

当我第一次看到jQuery的.animate函数时，我非常激动。但是，如果我（例如）在启用此功能的情况下更改长方体的颜色。mouseover，它将（当然）完成动画，尽管鼠标已经离开长方体，并且调用了另一个反转颜色的动画。mouseleave

例如，如果您将鼠标悬停在长方体上多次，并且动画重复20次或更多，则会导致拍打

若要停止动画/若鼠标不再在方框上，则要反转颜色更改，您可以使用已提出的此问题的功能组合：

下面是针对类似动画的此问题的示例代码：

这似乎不是很优雅和复杂。是否有类似于.animate的jQuery函数，但会在鼠标不在框中后反转动画

比如：

$('.myClass').animate_and_reverse_animation_if_hover_ends( {...} , 500 );

那么你更喜欢这样的电话

$('.box1,.box2').animate_and_reverse_animation_if_hover_ends({top: 0}, {top: "-200px"}, 'slow');

没有人（除了你）知道发生了什么事-关于这个：

$('.box1,.box2').mouseenter(function () {
    $('.box2').stop().animate({
        top: 0
    }, 'slow');
}).mouseleave(function () {
    $('.box2').stop().animate({
        top: '-200px'
    }, 'slow');
});

第二个版本是IMHO，它在jQuery世界中变得优雅、简单且可读

我建议你继续做下去，使用你在问题中提供的解决方案。但是如果必须的话，您可以编写自己的

jQuery.animate\u和\u reverse\u animation\u if\u hover\u ends（）

插件，它封装了第二个被剪断的部分

更新：

正如CBroe在评论中指出的那样。优雅的真正改进可能是在CSS中制作动画/转换。

下面是使用CSS的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.bottom, .top {
    width: 200px;
    height: 200px;
}
.bottom { background-color: black; }
.top {
    background-color: red;
    transform: translate(0, 0%);
    transition: transform .3s ease;
    will-change: transform;
}
.top.covered { transform: translate(0, 100%); }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).on('mouseover', '.bottom', function(){
        $(".top").addClass("covered");
    });
    $(document).on('mouseout', '.top', function(){
        $(".top").removeClass("covered");
    });
});
</script>
</head>
<body>
<div id="container">
    <div class="top"></div>
    <div class="bottom"></div>
</div>
</body>
</html>


无标题文件
.底部，.顶部{
宽度：200px；
高度：200px；
}
.bottom{背景色：黑色；}
.顶{
背景色：红色；
转换：翻译（0,0%）；
转变：转变。3s轻松；
改变：转变；
}
.top.covered{transform:translate（0，100%）；}
$（文档）.ready（函数（）{
$（document）.on（'mouseover'，'.bottom'，function（）{
$（“.top”）.addClass（“已覆盖”）；
});
$（document）.on（'mouseout'，'.top'，function（））{
$（“.top”）.removeClass（“已覆盖”）；
});
});

还有小提琴：

嗯，不（据我所知），因为这是一部非常特别的动画。您可以随时为jQuery编写自己的插件，这样您就可以调用

$（'.myClass'）。如果悬停结束（{…}，500），则设置动画和反转动画并让它做你想做的。顺便说一句，这是CSS动画或转换一开始就不会有的问题…谢谢，我如何使用“CSS中的动画/转换”。到目前为止，我只知道使用.div:hover{…}之类的东西来在CSS中设置动画。谢谢你的回答。你能不能快一点把CSS给我。我不太明白你在那里用转换和转换做了什么？我玩了一个游戏，但是用你的代码，现在我明白了，这种可能性太棒了！我会读更多关于这方面的内容！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.bottom, .top {
    width: 200px;
    height: 200px;
}
.bottom { background-color: black; }
.top {
    background-color: red;
    transform: translate(0, 0%);
    transition: transform .3s ease;
    will-change: transform;
}
.top.covered { transform: translate(0, 100%); }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).on('mouseover', '.bottom', function(){
        $(".top").addClass("covered");
    });
    $(document).on('mouseout', '.top', function(){
        $(".top").removeClass("covered");
    });
});
</script>
</head>
<body>
<div id="container">
    <div class="top"></div>
    <div class="bottom"></div>
</div>
</body>
</html>