Ad

Transition Of The Functions Called In Onmouseleave Do Not Execute Fully When Pointer Leaving And Going To Next Link Too Fast

When mouse pointer enters link, onmouseenter calls function that works, but when mouse pointer leaves link, and it leaves very fast, onmouseleave does not fully execute the function, otherwise if going out slowly, it executes like it should

I have tried with onmouseover and onmouseout, functions execute fully, but there is constant flickering

function menuSlideOn(element) {
              document.getElementById(element).style.transition = 'all 0.1s';
              document.getElementById(element).style.height = '24px';
              document.getElementById(element).style.margin = '0px 6px 0px 0px';
              setTimeout(function delay() {
                  document.getElementById(element).style.width = '120px';
				  document.getElementById(element).style.transform = 'skew(-30deg)';
              },
              120);
          }

          function menuSlideOf(element) {
              document.getElementById(element).style.transition = 'all 0.1s';
              document.getElementById(element).style.width = '6px'
              setTimeout(function delay() {
                  document.getElementById(element).style.height = '10px';
                  document.getElementById(element).style.margin = '5px 6px 0px 0px';
				  document.getElementById(element).style.transform = 'skew(0deg)';
              },
              120);
          }
ul {
	list-style-type: none;
	margin: 10px;
    }
    li {
	margin: 10px;
	padding: 10px;
    }
    ul a {
	color: #333;
	text-decoration: none;
	text-indent: 20px;
	font-weight: bold;
	position: fixed;
    }
    .bullet {
	width: 6px;
	height: 10px;
	background: gray;
	float: left;
	margin-top: 5px;
	position: absolute;
    }
<ul>
                    <li onmouseenter="menuSlideOn('d1')" onmouseleave="menuSlideOf('d1')">
						<div id="d1" class="bullet">&nbsp;</div>
						<a target="_blank" rel="nofollow noreferrer" href="">HTML</a>
                    </li>
                    <li onmouseenter="menuSlideOn('d2')" onmouseleave="menuSlideOf('d2')">
                        <div id="d2" class="bullet">&nbsp;</div>
						<a target="_blank" rel="nofollow noreferrer" href="">CSS</a>
                    </li>
                    <li onmouseenter="menuSlideOn('d3')" onmouseleave="menuSlideOf('d3')">
                        <div id="d3" class="bullet">&nbsp;</div>
						<a target="_blank" rel="nofollow noreferrer" href="">JavaScript</a>
                    </li>
                    <li onmouseenter="menuSlideOn('d4')" onmouseleave="menuSlideOf('d4')">
                        <div id="d4" class="bullet">&nbsp;</div>
						<a target="_blank" rel="nofollow noreferrer" href="">Java</a>
                    </li>
                </ul>

I expect that the code should return the div to initial state after hovering the link, disregarding movement speed of mouse pointer

Actual results are dependent to speed of mouse pointer leaving the link

Ad

Answer

Another solution is that if you add all the code in setTimeout() then this problem will not occur ;

function menuSlideOn(element) {
    setTimeout(function delay() {
    document.getElementById(element).style.transition = 'all 0.1s';
    document.getElementById(element).style.height = '24px';
    document.getElementById(element).style.margin = '0px 6px 0px 0px';
    
        document.getElementById(element).style.width = '120px';
        document.getElementById(element).style.transform = 'skew(-30deg)';
    },
    150);
}

function menuSlideOf(element) {
    setTimeout(function delay() {
    document.getElementById(element).style.transition = 'all 0.1s';
    document.getElementById(element).style.width = '6px'
    
        document.getElementById(element).style.height = '10px';
        document.getElementById(element).style.margin = '5px 6px 0px 0px';
        document.getElementById(element).style.transform = 'skew(0deg)';
    },
    150);
}
ul {
	list-style-type: none;
	margin: 10px;
    }
    li {
	margin: 10px;
	padding: 10px;
    }
    ul a {
	color: #333;
	text-decoration: none;
	text-indent: 20px;
	font-weight: bold;
	position: fixed;
    }
    .bullet {
	width: 6px;
	height: 10px;
	background: gray;
	float: left;
	margin-top: 5px;
	position: absolute;
    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="mouse_out.js"></script>
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="mouse_out.css">
</head>

<body>
    <ul>
        <li onmouseenter="menuSlideOn('d1')" onmouseleave="menuSlideOf('d1')">
            <div id="d1" class="bullet">&nbsp;</div>
            <a target="_blank" rel="nofollow noreferrer" href="">HTML</a>
        </li>
        <li onmouseenter="menuSlideOn('d2')" onmouseleave="menuSlideOf('d2')">
            <div id="d2" class="bullet">&nbsp;</div>
            <a target="_blank" rel="nofollow noreferrer" href="">CSS</a>
        </li>
        <li onmouseenter="menuSlideOn('d3')" onmouseleave="menuSlideOf('d3')">
            <div id="d3" class="bullet">&nbsp;</div>
            <a target="_blank" rel="nofollow noreferrer" href="">JavaScript</a>
        </li>
        <li onmouseenter="menuSlideOn('d4')" onmouseleave="menuSlideOf('d4')">
            <div id="d4" class="bullet">&nbsp;</div>
            <a target="_blank" rel="nofollow noreferrer" href="">Java</a>
        </li>
    </ul>
</body>

</html>

Ad
source: stackoverflow.com
Ad