纯原生,不使用jQuery
鼠标移入元素后出发 onmouseover 当动画执行完毕之后再判断当前鼠标位置是
否在元素内或外,若在外则执行 onmouseout 若在元素内则不做任何处理。
<div id= "itemTitle" class="itemTitle">
<span class="topline"></span>
<p></p>
<span class="bottomline"></span>
</div>
假设上方这样一个结构,
window.onload = function(){
itemTitle = document.getElementById("itemTitle");
topline = document.querySelector(".topline");
bottomline = document.querySelector(".bottomline");
itemTitle.addEventListener("mouseover",titAnimat);
itemTitle.addEventListener("transitionend",mouseOut);
}
function mouseOut(){
itemTitle.addEventListener("mouseout",titInit);
}
**想要的结果**:当鼠标移入时触发mouseover,直到动画结束后,再判断当前鼠标位置。
该如何实现?
这个代码里没有看到有动画内容?如果是自己通过css样式写的,建议通过定时器实现。
用个全局变量记录住是否在容器内,还要修改你的titAnimat这个函数,执行动画的代码完毕后判断这个变量如果是true(容器内)就执行下mouseOut()
mouseover事件里移除mouseover事件,等动画播完了再加回来,或者动画采用层,遮罩住这个控件,就不会再出发mouseover事件了