javascript - 当用户不再悬停时，如何使这个无限的 jquery 动画结束？-6ren

javascript - 当用户不再悬停时，如何使这个无限的 jquery 动画结束？

转载作者：太空宇宙更新时间：2023-11-04 07:02:37

当您将鼠标悬停在我的菜单中的三个元素中的任何一个上时，会有一个浅蓝色的点开始闪烁红色。当用户不再将鼠标悬停在 FormsItem1、FormsItem2 或 FormsItem3 div 上时，我希望该动画停止。我尝试使用 mouseover 和 mouseout 函数，但在我停止悬停后，颜色变化动画似乎只是任意继续。如何将颜色变化动画限制在用户悬停时？

这是我的 Jquery 代码:

<script>

$(document).ready(function(){

    $(".dotIcon").animate({'opacity': '1'}, 1000);

 $('#FormsItem1').mouseover(function(){
    initList = setInterval(function dotColorChange(){
        $("#dotIcon1").animate({'background-color': 'white'}); 
        $("#dotIcon1").animate({'background-color': 'red'})
    },100); 
 }).mouseout(function(){
    clearInterval(initList);
        $("#dotIcon1").animate({'background-color': 'white'})
 });

 $('#FormsItem2').mouseover(function(){
    initList = setInterval(function dotColorChange(){
        $("#dotIcon2").animate({'background-color': 'white'}); 
        $("#dotIcon2").animate({'background-color': 'red'})
    },100); 
 }).mouseout(function(){
    clearInterval(initList);
        $("#dotIcon2").animate({'background-color': 'white'})
 });


 $('#FormsItem3').mouseover(function(){
    initList = setInterval(function dotColorChange(){
        $("#dotIcon3").animate({'background-color': 'white'}); 
        $("#dotIcon3").animate({'background-color': 'red'})
    },100); 
 }).mouseout(function(){
    clearInterval(initList);
        $("#dotIcon3").animate({'background-color': 'white'})
 });


    $("#FormsItem1").hover(function(){
        $(".FormPreviewPane").css("background-color", "white");
        $(".PreviewContainer").animate({'top': '195px'},100);
        $("#PreviewLine").animate({'top': '77px'},200);
        }, function(){
    });


    $("#FormsItem2").hover(function(){
        $(".FormPreviewPane").css("background-color", "beige");
        $("#PreviewLine").animate({'top': '157px'},200);
        }, function(){
    });

    $("#FormsItem3").hover(function(){
        $(".FormPreviewPane").css("background-color", "lightgray");
        $("#PreviewLine").animate({'top': '237px'},200);
        }, function(){
    });

});


</script>

这是我的 CSS:

<style>


.opaqueBlock{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity:0.6;
    margin-left: 60px; 
    width: 360px; 
    height: 46px; 
    background-color: #486173;
    border-radius: 10px;
}

.opaqueBlock:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
    opacity:0.8;
}

.formLinkContainer{ 
    position: absolute;
}

.formTextSpan:hover + .opaqueBlock{ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80) !important";
    opacity: 0.8 !important;
}

.formTextSpan{
    position: absolute; 
    z-index: 1; margin-left: 73px; 
    color: white; 
    margin-top: 7px; 
    font-family: 'Didact Gothic' !important; 
    font-size: 23px !important;
}

.dotIcon{
    height: 30px;
    width: 30px;
    background-color: #D6EDFF; /*#E8F5FF*/
    position: absolute; 
    margin-left:13px;
    margin-top: 7px;
    border-radius: 15px;
    opacity: 0;
    box-shadow: 0 0 10px 1px white;
}

.dotLine{
    position: absolute;
    left: 43px;
    top: 22px;
    stroke: white;
}


img{border: none;}

.FormPreviewPane {
    position: absolute; 
    border: 1px dotted blue; 
    width: 340px; 
    height: 345px; 
    box-shadow: 0px 0px 33px 5px #848C9C; 
    z-index:1; 
    background-image: url('');
    border-radius:50px;
    opacity: 0.8;
}

.FormPreviewPane.stuck {
    position:fixed;
    top:0;
}

.FormPreviewPaneBackground{
    position: absolute; 
    width: 337px; 
    height: 435px; 
    z-index: 0;     
    opacity:0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}

.PreviewContainer{
    position: absolute; 
    top: 195px; 
    left: 550px; 
    width: 430px;
}

#PreviewLine{
    stroke: #D6EDFF;
    stroke-width:7;
    transform: rotate(0deg); 
    opacity: 1.0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
    position: absolute; 
    left: -129px; top: 77px;
}

#FormsItem1{top: 250px;}
#FormsItem2{top: 330px;}
#FormsItem3{top: 410px;}


</style>

这是我的 HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--this version works with IE-->
<script type="text/javascript" src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- color change animator -->







<div id="WoodenBackgroundContainer" style="background-color: navy; height: 800px;">



<a id="PreviewContainerLink" href="" target="_blank">
    <div class="PreviewContainer">
        <svg id="PreviewLine" height="5" width="131"><line x1="0" y1="0" x2="131" y2="0"/></svg>
        <div class="FormPreviewPane"></div>
        <div class="FormPreviewPaneBackground"></div>
    </div>
</a>


<a href="#" target="_blank">
<div id="FormsItem1" class="formLinkContainer">
<div class="dotIcon" id="dotIcon1"></div>
<svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="131" y2="0"/></svg>
<span class="formTextSpan">Internal Communication</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="#" target="_blank">
<div id="FormsItem2" class="formLinkContainer">
<div class="dotIcon" id="dotIcon2"></div>
<svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="131" y2="0"/></svg>
<span class="formTextSpan">Reports Package</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="#" target="_blank">
<div id="FormsItem3" class="formLinkContainer">
<div class="dotIcon" id="dotIcon3"></div>
<svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="131" y2="0"/></svg>
<span class="formTextSpan">Talking Points</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>



</div>
</div>

最佳答案

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--this version works with IE-->
<script type="text/javascript" src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- color change animator -->
<style>


.opaqueBlock{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity:0.6;
    margin-left: 60px;
    width: 360px;
    height: 46px;
    background-color: #486173;
    border-radius: 10px;
}

.opaqueBlock:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    opacity:0.8;
}

.formLinkContainer{
    position: absolute;
}

.formTextSpan:hover + .opaqueBlock{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80) !important";
    opacity: 0.8 !important;
}

.formTextSpan{
    position: absolute;
    z-index: 1; margin-left: 73px;
    color: white;
    margin-top: 7px;
    font-family: 'Didact Gothic' !important;
    font-size: 23px !important;
}

.dotIcon{
    height: 30px;
    width: 30px;
    background-color: #D6EDFF; /*#E8F5FF*/
    position: absolute;
    margin-left:13px;
    margin-top: 7px;
    border-radius: 15px;
    opacity: 0;
    box-shadow: 0 0 10px 1px white;
}

.dotLine{
    position: absolute;
    left: 43px;
    top: 22px;
    stroke: white;
}


img{border: none;}

.FormPreviewPane {
    position: absolute;
    border: 1px dotted blue;
    width: 340px;
    height: 345px;
    box-shadow: 0px 0px 33px 5px #848C9C;
    z-index:1;
    background-image: url('');
    border-radius:50px;
    opacity: 0.8;
}

.FormPreviewPane.stuck {
    position:fixed;
    top:0;
}

.FormPreviewPaneBackground{
    position: absolute;
    width: 337px;
    height: 435px;
    z-index: 0;
    opacity:0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}

.PreviewContainer{
    position: absolute;
    top: 195px;
    left: 550px;
    width: 430px;
}

#PreviewLine{
    stroke: #D6EDFF;
    stroke-width:7;
    transform: rotate(0deg);
    opacity: 1.0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    position: absolute;
    left: -129px; top: 77px;
}

#FormsItem1{top: 250px;}
#FormsItem2{top: 330px;}
#FormsItem3{top: 410px;}


</style>






<div id="WoodenBackgroundContainer" style="background-color: navy; height: 800px;">



<a id="PreviewContainerLink" href="" target="_blank">
    <div class="PreviewContainer">
        <svg id="PreviewLine" height="5" width="131"><line x1="0" y1="0" x2="131" y2="0"/></svg>
        <div class="FormPreviewPane"></div>
        <div class="FormPreviewPaneBackground"></div>
    </div>
</a>


<a href="#" target="_blank">
<div id="FormsItem1" class="formLinkContainer">
<div class="dotIcon" id="dotIcon1"></div>
<svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="131" y2="0"/></svg>
<span class="formTextSpan">Internal Communication</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="#" target="_blank">
<div id="FormsItem2" class="formLinkContainer">
<div class="dotIcon" id="dotIcon2"></div>
<svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="131" y2="0"/></svg>
<span class="formTextSpan">Reports Package</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="#" target="_blank">
<div id="FormsItem3" class="formLinkContainer">
<div class="dotIcon" id="dotIcon3"></div>
<svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="131" y2="0"/></svg>
<span class="formTextSpan">Talking Points</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>



</div>
</div>

<script>

$(document).ready(function(){

    $(".dotIcon").animate({'opacity': '1'}, 1000);
var initList;
 $('#FormsItem1').mouseover(function(){
   if (initList) clearInterval(initList);
    initList = setInterval(function dotColorChange(){
        $("#dotIcon1").animate({'background-color': 'white'});
        $("#dotIcon1").animate({'background-color': 'red'})
    },100);
 }).mouseout(function(){
    clearInterval(initList);
        $("#dotIcon1").animate({'background-color': 'white'}).finish();
 });

 $('#FormsItem2').mouseover(function(){
   if (initList) clearInterval(initList);
    initList = setInterval(function dotColorChange(){
        $("#dotIcon2").animate({'background-color': 'white'});
        $("#dotIcon2").animate({'background-color': 'red'})
    },100);
 }).mouseout(function(){
    clearInterval(initList);
        $("#dotIcon2").animate({'background-color': 'white'}).finish();
 });

 $('#FormsItem3').mouseover(function(){
   if (initList) clearInterval(initList);
    initList = setInterval(function dotColorChange(){
        $("#dotIcon3").animate({'background-color': 'white'});
        $("#dotIcon3").animate({'background-color': 'red'})
    },100);
 }).mouseout(function(){
   console.log('hei');
    clearInterval(initList);
        $("#dotIcon3").animate({'background-color': 'white'}).finish();
 });


    $("#FormsItem1").hover(function(){
        $(".FormPreviewPane").css("background-color", "white");
        $(".PreviewContainer").animate({'top': '195px'},100);
        $("#PreviewLine").animate({'top': '77px'},200);
        }, function(){
    });


    $("#FormsItem2").hover(function(){
        $(".FormPreviewPane").css("background-color", "beige");
        $("#PreviewLine").animate({'top': '157px'},200);
        }, function(){
    });

    $("#FormsItem3").hover(function(){
        $(".FormPreviewPane").css("background-color", "lightgray");
        $("#PreviewLine").animate({'top': '237px'},200);
        }, function(){
    });

});


</script>

处理间隔时，请注意多次运行它们。您也可以调用 finish() 来停止动画

关于javascript - 当用户不再悬停时，如何使这个无限的 jquery 动画结束？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51903729/

文章推荐： python - 将结果写入 Python 中的参数？

文章推荐： python - 使用 for 循环但忽略第一项？

文章推荐： c - 嵌套的 if-else 语句给我带来了问题

naming-conventions - 开始 -> 结束 |停止 |结束？
我正在编写一个类，我想知道哪一对方法更适合描述流程周期: start() -> stop() start() -> end() start() -> finish() 基本上这些方法将在执行任务之前和
android - 小部件类名称什么时候以 "View"结束，什么时候以 "Layout"结束？
对于 Android 小部件类名称是否应以“View”、“Layout”或两者都不结尾，是否存在模式或命名约定？最佳答案如果该类扩展了 View(或在其层次结构中扩展了 View)，那么它应该以“
VIM 高亮匹配开始/结束
我正在尝试找到一个插件，该插件将使用 Verilog 突出显示匹配的开始/结束语句。 VIM 让它与花括号/括号一起工作，但它不能与它的开始/结束一起工作。我希望 VIM 突出显示正确的开始到正确的结
matlab - 时间序列元胞数组中的数据总和(结束)
给出以下代码: % Generate some random data n = 10; A = cell(n, 1); for i=1:n A{i} = timeseries; A{i
javascript - 检测输入何时聚焦于开始/结束
我需要知道是否可以检测输入何时开始聚焦以及何时结束焦点 HTML 代码: JQuery 代码(仅示例我如何需要它): $('.datas').on('focusStart', alert("fo
Java，结束 JFrame
所以我一直在思考一款游戏的想法，一款需要穿越时空的游戏。因此，我编写了一个 JFrame 来显示螺旋的 .gif，但它并没有在对话框显示时结束，而是保留在后台。我可以解决这个问题吗？ import j
java - 我的程序没有以执行器返回/结束
给出以下使用多线程的 Java 示例: import java.util.concurrent.*; public class SquareCalculator { private Ex
java - 结束 do-while 循环
好吧，我有一个 do-while 循环，应该在使用点击“q”时结束，但它给了我错误消息，请帮忙。 package Assignments; import java.util.*; public cla
regex - 正则表达式可选匹配行的开始/结束
我如何有选择地匹配开始 ^或结束 $正则表达式中的一行？例如: /(?\\1', $str); 我的字符串开头和结尾处的粗体边缘情况没有被匹配。我在使用其他变体时遇到的一些极端情况包括字符串内匹配、
java - 结束 while 循环的问题
我试图让程序在总数达到 10 时结束，但由于某种原因，我的 while 循环在达到 10 时继续计数。一旦回答了 10 个问题，我就有 int 百分比来查找百分比。 import java.util.
jquery - 结束()函数
jQuery 中的 end() 函数将元素集恢复到上次破坏性更改之前的状态，因此我可以看到它应该如何使用，但我已经看到了一些代码示例，例如:on alistapart (可能来自旧版本的 jQuery
javascript - 如何知道一个字符串以javascript中的特定字符开始/结束？
这个问题在这里已经有了答案: How to check if a string "StartsWith" another string? (18 个答案) 关闭 9 年前。 var file =
postgresql - 工作停顿(结束)
我正在尝试在 travis 上设置两个数据库，但它只是在 before_install 声明的中途停止: (END) No output has been received in the last 1
mysql - 结束 while 循环缺少分号
我创建了一个简单的存储过程，它循环遍历一个表的行并将它们插入到另一个表中。由于某种原因，END WHILE 循环抛出缺少分号错误。所有代码对我来说都是正确的，并且所有分隔符都设置正确。我只是不明白为什
ios - AVSpeechSynthesis 结束
您好，我正在使用 AVSpeechSynthesizer 和 AVSpeechUtterance 构建一个 iOS 7 应用程序，我想弄清楚合成何时完成。更具体地说，我想在合成结束时更改播放/暂停按钮
javascript - 响应后调用提醒。结束
这是我的代码，我试图在响应后显示警报。但没有显示操作系统警报 string filepath = ConfigurationManager.AppSettings["USPPath"].ToStri
python - 遍历日历月的开始/结束
我想创建一个循环，在提供的时间段、第一天和最后一天返回每个月(考虑到月份在第 28-31 天结束):(“function_to_increase_month”尚未定义) for beg in pd.d
python - 结束 while 循环
我目前正在用 Python 3.6 为一个骰子游戏编写代码，我知道我的编码在这方面有点不对劲，但是，我真的只是想知道如何开始我的 while 循环。游戏说明如下…… 人类玩家与计算机对战。玩家 1
android - 结束 fragment
所以我已经了解了如何打开 fragment。这是我的困境。我的 view 旁边有一个元素列表(元素周期表元素)。当您选择一个元素时，它会显示它的信息。我的问题是我需要能够从(我们称之为详细信息 fr
javascript - 检测滚动完成/结束
我想检测用户何时停止滚动页面/元素。这可能很棘手，因为最近对 OSX 滚动行为的增强创造了这种新的惯性效应。是否触发了事件？我能想到的唯一其他解决方案是在页面/元素的滚动位置不再改变时使用间隔来拾取

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 当用户不再悬停时，如何使这个无限的 jquery 动画结束？