Javascript 站点gif延迟/重叠

问题的标题可能不是很好，但我真的不知道如何描述它，所以它是这样的：

我有N个

元素，其中包含文本（text1、text2、text3…），当您将鼠标悬停在每个元素上时，会出现一个弹出窗口，其中分别播放gif（gif1、gif2、gif3…）。当鼠标离开

时，gif就会消失。 我的问题是：

将鼠标悬停在文本1上--->弹出窗口，gif1正在播放[正确的[/strong>]

离开文本1----------->弹出窗口消失[正确[/strong>]

将鼠标悬停在文本2上-->弹出窗口显示gif1播放一段时间（0.5秒-1秒），然后gif2播放[不正确]

离开文本2----------->弹出窗口消失[正确[/strong>]

将鼠标悬停在text3上-->弹出窗口显示gif2播放一段时间（0.5秒-1秒），然后gif3播放[不正确]

并且不断地（）

那么，我怎样才能保证每次播放新的gif时都不显示以前的gif呢

---

HTML

弹出窗口基本上是一个

：

CSS

---

没有花哨的CSS除了淡入。但无论如何，我已经尝试将其完全删除，但没有任何更改。

您的问题是，任何新的gif都需要时间加载，并在这段时间内显示以前的源文件

---

最简单的解决方法是将

src

属性设置为

pop\u out

函数中的某个占位符。

现在我感觉很糟糕。我有点猜测这可能是问题所在，这就是为什么我还尝试在

pop\u out

函数的末尾执行

popup\u here=null

。但它什么也没做。现在我试着在这里弹出。src=null并且它确实起作用了。我认为只要有

popup\u here=null

就足够了，所以直到现在我才尝试

.src

。谢谢你的帮助

<div class="popup">
 <img class="myPopup">
</div>

var popup_here

function pop_in(e){
    var row_num=.....//getting the coordinates
    var ex_num=.....//getting the coordinates

    popup_here=document.getElementsByClassName("myPopup")[0];
    popup_here.src=....//setting the source to the correct gif from a list of objects using the row_num and ex_num variables

    popup_here.style.visibility="visible";
}

function pop_out(e){
    popup_here.style.visibility="hidden";
}