Переход функций, вызываемых в onmouseleave, не выполняется полностью, когда указатель уходит и слишком быстро переходит к следующей ссылке - PullRequest
Новая
       23

Переход функций, вызываемых в onmouseleave, не выполняется полностью, когда указатель уходит и слишком быстро переходит к следующей ссылке

1 голос
/ 25 апреля 2019

Когда указатель мыши входит в ссылку, onmouseenter вызывает функцию, которая работает, но когда указатель мыши покидает ссылку и уходит очень быстро, onmouseleave не выполняет функцию полностью, в противном случае при медленном выходе она выполняется так, как должна

Я пробовал с onmouseover и onmouseout, функции выполняются полностью, но постоянно мигает 

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 href="">HTML</a>
                    </li>
                    <li onmouseenter="menuSlideOn('d2')" onmouseleave="menuSlideOf('d2')">
                        <div id="d2" class="bullet">&nbsp;</div>
						<a href="">CSS</a>
                    </li>
                    <li onmouseenter="menuSlideOn('d3')" onmouseleave="menuSlideOf('d3')">
                        <div id="d3" class="bullet">&nbsp;</div>
						<a href="">JavaScript</a>
                    </li>
                    <li onmouseenter="menuSlideOn('d4')" onmouseleave="menuSlideOf('d4')">
                        <div id="d4" class="bullet">&nbsp;</div>
						<a href="">Java</a>
                    </li>
                </ul>

Я ожидаю, что код должен вернуть div в исходное состояние после наведения ссылки, независимо от скорости перемещения указателя мыши

Фактические результаты зависят от скорости указателя мыши, покидающего ссылку

1 Ответ

0 голосов
/ 25 апреля 2019

Другое решение состоит в том, что если вы добавите весь код в setTimeout(), то эта проблема не возникнет; 

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" href="mouse_out.css">
</head>

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

</html>
...