网站 gif delay/overlap

Question

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

我有 N <td> 个带有文本的元素（text1、text2、text3...），当您将鼠标悬停在每个元素上时 pop-up出现相应的 gif 播放（gif1、gif2、gif3...）。当您的鼠标离开 <td> 时，gif 会消失。我的问题是：

将鼠标悬停在文本 1---> pop-up 出现并播放 gif1 [正确]
留文1------------>pop-up消失[正确]
将鼠标悬停在 text2 ----> pop-up 出现 gif1 播放一点（0.5sec-1sec）然后 then gif2 播放 [不正确]
留文2------------>pop-up消失[正确]
将鼠标悬停在 text3 上----> pop-up 出现 gif2 播放一小段时间（0.5 秒到 1 秒）然后然后 gif3 播放 [不正确]

不断 (video example)。

那么我怎样才能不显示以前的 gif every-time 新的 gif 应该播放？

HTML

pop-up基本上就是一个<div>:

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

JS

<td> 有一个 mouseenter 和一个 mouseleave 事件分别触发函数 pop_in 和 pop_out。

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";
}

CSS

除了 fade-in 之外没有花哨的 CSS。但无论如何，我试过完全删除它，但没有任何改变。

Answer 1

您的问题是任何新的 gif 都需要时间来加载，并且在此期间会显示以前的源。

最简单的解决方案是将 src 属性设置为 pop_out 函数中的某个占位符。

网站 gif delay/overlap

Site gif delay/overlap

html

javascript

css

gif