javascript - JavaScript transition for onmouseover() not transitioning back how I want it to in the onmouseout() event

问题描述

I have some photos on my website and I'm trying to put the JS equivalent of a CSS :hover effect on the captions with a .25s transition.

You can see in the code below I'm doing this with onmouseover() and onmouseout() events in the HTML and then writing a transition function in the JS. Pretty basic stuff. Everything works almost like it should. The caption transitions in when I put my mouse on the photo, and transitions out when I mouse off.

HOWEVER, if I just fly my mouse over the photo very quickly, sometimes the caption will come in and stay there until I mouse over it again. That doesn't happen every time. I'm no expert in machine mechanics and order of operations, but it almost seems to me as if, when I do that, the onmouseover() and onmouseout() events overlap and the "winner" is what executes.

I was wondering if there's any certain way to make sure that when I flick my mouse over very quickly, the caption either doesn't show up or goes away every time instead of transitioning in and staying there. Is it a simple matter of putting a delay on one of the transitions? Or is there some way I can prioritize one function if they both try to execute simultaneously?

The site isn't live yet so I can't link you to it, but here's the code for one of the photos and the JS for the events. I didn't put the CSS in there so I think the <div> might be bigger than the picture, but run the code and flick your mouse over the image from right to left so you get off the <div> and see if it happens for you!

            function divMouseOver(num){
                var elementX = document.getElementById("photo" + num + "Subtitle");
                var elementZ = document.getElementById("photo" + num + "Text");
                var opac = 0;
                var id = setInterval(frame, 10);
                
                function frame(){
                    if(opac < 1.0){
                        opac = opac + 0.04;
                        elementX.style.opacity = '0' + opac;
                        elementZ.style.opacity = '0' + opac;
                    }
                    else{
                        clearInterval(id);
                    }
                }
            }
            
            function divMouseOut(num){
                var elementX = document.getElementById("photo" + num + "Subtitle");
                var elementZ = document.getElementById("photo" + num + "Text");
                var opac = 1.0;
                var id = setInterval(frame, 10);
                
                function frame(){
                    if(elementX.style.opacity > 0.0){
                        opac = opac - 0.04;
                        elementX.style.opacity = '0' + opac;
                        elementZ.style.opacity = '0' + opac;
                        if(elementX.style.opacity == 0.04){
                            elementX.style.opacity = 0.0;
                            elementZ.style.opacity = 0.0;
                        }
                    }
                    else{
                        clearInterval(id);
                    }
                    
                }
            }

    <div class="sectionPhotos">
        <div class="container-fluid">
            <div id="photoRow" class="row">
                    <div class="row1Photo" onmouseover="divMouseOver(1)" onmouseout="divMouseOut(1)">
                        <img style ="width:160px;height:100px;"src="https://cdn.wallpapersafari.com/26/0/VTGXtw.jpg"/>
                        <div id="photo1Subtitle" class="row1PhotoSubtitle">
                            <h5>PHOTO SUBTITLE:</h5>
                        </div>
                        <div id="photo1Text" class="row1PhotoText">
                            <h4 class="pageLinkHere">PAGE LINK ON PHOTO</h4>
                        </div>
                    </div>
            </div>
        </div>
    </div>

标签： javascripthtmlcss

javascript - JavaScript transition for onmouseover() not transitioning back how I want it to in the onmouseout() event

问题描述

解决方案

推荐阅读