如何停止当前正在运行的动画并在悬停时更改样式
停止当前正在运行的动画并在悬停时更改样式可以通过以下步骤实现：
- 使用CSS的
@keyframes规则定义动画，并将其应用于需要动画效果的元素。例如，可以创建一个名为myAnimation的动画：
@keyframes myAnimation {
0% { opacity: 0; }
100% { opacity: 1; }
}
.element {
animation: myAnimation 2s infinite;
}- 在JavaScript中，使用
querySelector或其他选择器方法选择要停止动画的元素，并使用style.animationPlayState属性将动画状态设置为paused以停止动画：
const element = document.querySelector('.element');
element.style.animationPlayState = 'paused';- 使用
addEventListener方法为元素添加mouseover和mouseout事件监听器，以在悬停时更改样式。在事件处理程序中，可以使用style属性修改元素的样式：
element.addEventListener('mouseover', function() {
this.style.backgroundColor = 'red';
});
element.addEventListener('mouseout', function() {
this.style.backgroundColor = 'blue';
});完整的代码示例：
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes myAnimation {
0% { opacity: 0; }
100% { opacity: 1; }
}
.element {
animation: myAnimation 2s infinite;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="element"></div>
<script>
const element = document.querySelector('.element');
element.style.animationPlayState = 'paused';
element.addEventListener('mouseover', function() {
this.style.backgroundColor = 'red';
});
element.addEventListener('mouseout', function() {
this.style.backgroundColor = 'blue';
});
</script>
</body>
</html>在上述示例中，当鼠标悬停在元素上时，背景颜色将更改为红色，当鼠标移出元素时，背景颜色将更改为蓝色。动画将停止播放，因为我们将其动画状态设置为paused。
相关·内容
所以我有这个简单的标签，上面有一个联系电话，上面有一个闪烁的动画。(代码如下)这是一个简单的颜色过渡。 此外，我需要暂停动画(完成)，并应用默认颜色的文本。当悬停时，动画显然会以随机的颜色暂停，但不会更改为我想要的颜色。
浏览 10提问于2019-09-21得票数 0
回答已采纳
2回答
我有一个div列表，每个都有一个不同的背景颜色。当我悬停在其中任何一个，我希望它改变为灰色，然后回到原来的颜色，当我的鼠标离开元素。下面是我用来这样做的代码：$('.div-class-name').hover( originalColor$(this).animate({ }, dur
浏览 6提问于2014-07-28得票数 0
回答已采纳
4回答
我有一个选项框，徘徊在网页的右上角。它的不透明度设置为10%，这样就不会对用户造成阻碍。当鼠标悬停在它上面(鼠标输入)时，我使用jQuery来淡入和滑下内容(反之亦然)。如果他们重复这样做，那么动画就会堆叠起来，有时你可能会陷入鼠标静止不动，但方框却摇摇晃晃的状态。$("#dropdown").mouseenter(function() {
$(thi
浏览 0提问于2010-05-18得票数 4
回答已采纳
为一个备受瞩目的客户做一些jQuery动画，这些动画必须在午餐前完成我已经让它在鼠标悬停时动画，然而，无论我如何努力，都不能让它在鼠标移出时停止动画-我目前
浏览 0提问于2012-03-01得票数 1
回答已采纳
1回答
我想使用我在这里找到的轮子脚本：，并添加一些东西来允许它始终缓慢旋转，直到它悬停/单击。有谁能建议如何做到这一点吗？
浏览 1提问于2014-12-17得票数 0
1回答
我正在尝试实现的是交互式动画徽标。默认情况下，它位于第1帧。悬停时，它向前播放并在最后一帧停止。在鼠标离开时，它从最后一帧播放到第一帧(向后)，并在第一帧停止。如果鼠标在前进动画期间保持不动，->将获取当前帧并向后播放。
我试着使用画布和精灵来做这件事，但它非常具有挑战性。事实上，我并不是真的理解它。我试过，但它的可能性是有限的。也许我可以
浏览 98提问于2016-09-08得票数 3
回答已采纳
1回答
我遇到了一个小问题，试图让动画在动画中途停止，优雅地返回到默认状态。我正在使用父元素上的:hover伪类对子元素应用动画，但希望当我停止悬停在该元素上时，动画能够优雅地返回到默认状态。我感觉我不应该在这里使用:hover伪类，还有另一种方法来处理它，但我似乎想不出如何让它过渡。它只是立即恢复到基本状态，这当然是有意义的，因为动画正在被剥离-但这不
浏览 0提问于2011-10-09得票数 3
回答已采纳
4回答
我在一个菜单上使用jquery有一个悬停效果，它工作得很好，但是如果你在项目上移动鼠标几次，动画就会像你在那个区域里一样快，抱歉，如果我不能像我希望的那样解释我的问题，我需要的是某种延迟，所以如果你移动鼠标很多次
浏览 0提问于2013-04-23得票数 1
回答已采纳
1回答
我尝试将DependencyProperty从一个值动画到一个目标值(在代码中)，当动画完成(或被取消)时，将最终值设置为该属性。最后的值将是动画完成时的To值，或者是动画取消时的当前计算值(由动画计算)。不久前，我编写了这个帮助方法来实现上述
浏览 1提问于2009-02-26得票数 2
回答已采纳
4回答
不幸的是，这似乎在我当前的脚本中不起作用： newSubMenu.css('visibility','visible').addClass('open');动画现在会在双击时停止，但newSubMenu仍然会得到类open，我不知道为什么。我试图实现的目标是，在动画完成之前不应用ope
浏览 3提问于2011-12-01得票数 2
回答已采纳
2回答
无论如何，我希望我的动画迭代数无限的悬停#img。 $(this).css({'background-image':'url(images/img-1.png&#
浏览 4提问于2014-04-02得票数 1
在再次动画元素之前，有必要停止动画吗？例如，我正在调整元素大小从200,200到800,800。在动画的中间，我想将相同的元素调整为600,600，而不是800,800。在对同一个元素使用.animate()函数之前是否应该使用.stop()来停止动画?如果不停止当前的动画，jQuery会在执行第二个动画之前完成第一个动画吗？当
浏览 5提问于2010-10-10得票数 0
回答已采纳
1回答
然后他们就会停止，一旦他们停止了，动画上的鼠标切换事件发生，它将播放到70%的动画完成，当单击另一个对象(在本例中是文本)时，它将完成它的循环。我的项目合作伙伴在Google网页设计器中制作了动画，我们已经为我们的项目尝试了多个程序，比如Adobe，但不幸的是，由于动画的大小，我们无法使用SVG或PNG序列，spritesheets也是如此。所以
浏览 2提问于2014-10-27得票数 0
回答已采纳
我正在尝试在Silverlight上的ToggleButton上设置VisualStates的样式。一切正常，除了选中状态不支持Rectangle.Fill中的更改，但文本颜色更改工作正常，所以选中状态被触发。我希望选中的状态与按下的状态具有相同的VisualState，并且按下可以正常工作，但当按下ToggleButton，然后选中状态时，Rectangle.Fill将恢复到初始状态，而不是我为选
浏览 0提问于2011-08-25得票数 1
回答已采纳
1回答
现在，我有一个简单的按钮设置，当鼠标被按下动画，当鼠标释放时逆转动画的效果。动画改变‘顶部’，‘左’和‘框-阴影’属性。为了允许jquery的.animate()函数影响元素的框影，我不得不使用一个特殊的jquery插件。为了便于参考，这里有一个。
问题是，即使鼠标按钮被立即释放，动画在继续反转之前就完成了。所期望的效果是用户通过按住或释放鼠标按钮来控制按钮是否在“向上”或“向下”移动。请参阅 (右
浏览 4提问于2013-12-17得票数 0
回答已采纳
2回答
让我的javascript正常工作有问题。对于单个工具提示，它工作得很好。但是当我滚动多个提示时，我得到一个闪烁的效果。看起来mouseover，out事件正在“排队”或者别的什么。
浏览 0提问于2012-04-12得票数 1
回答已采纳
}, $("ol#homePortfolio li img").fadeTo("slow", 1.0); );
然而，当我多次将鼠标悬停在图像上时，fadeIn和fadeOut会继续运行，我如何才能应用停止，使其只发生一次？
浏览 0提问于2011-05-09得票数 10
回答已采纳
我正在写一个通过CSS3转换来动画元素的jQuery插件。在jQuery中，有一个as .stop()，它中断所选元素上的当前动画。
你知道我怎么才能停止正在运行的CSS3动画吗？有没有一种原生的方法来处理这个问题，或者我必须测量动画，并将动画元素的样式设置为当前位置、颜色大小或其他任何值？这是jQuery插件
浏览 1提问于2011-03-15得票数 11
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
