Hello

There is such code:

function timeOutHover() { $('.work-examples__li').hover( // при наведении function(){ setTimeout(function() { $(this).addClass('newhover'); }, 1000); // 1 sek }, // при уходе function(){ setTimeout(function() { $(this).removeClass('newhover'); }, 1000); // 1 sek } ); }

I try to make it so that when hovering, the guidance did not work immediately, but through 1c, since there are several such blocks and if you quickly move the cursor over them, it doesn’t look very good. This code does not work, I don’t know why

  • one
    And what's the problem to do it on css with transition delay? - Mr. Black

4 answers 4

The option to pause, before setting the class when hovering, there is no blinking effect when quickly hovering over the blocks ... but the best solution in the first comment @Doofy

 var timer, pause = 400; $("ul").on("mouseenter mouseleave", "li", function(event) { window.clearTimeout(timer); var that = this; if (event.type == "mouseenter") { timer = window.setTimeout(function() { that.classList.add("newhover") }, pause) } else this.classList.remove("newhover") }) 
 ul { width: 660px; margin: 0 auto; padding-left: 0; list-style: none; overflow: hidden; } li { float: left; width: 25%; } a { text-decoration: none; text-align: center; display: block; color: #868686; padding: 0.5em; font-size: 1.4em; font-weight: bold; transition: 0.5s ease-in-out; font-family: 'Montez', cursive; } li.newhover a { color: #f70211; background-color: #D3D3D3; border-radius: 8px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li><a href="#" class="work-examples__li">About</a> </li> <li><a href="#" class="work-examples__li">Portfolio</a> </li> <li><a href="#" class="work-examples__li">Blog</a> </li> <li><a href="#" class="work-examples__li">Contact</a> </li> </ul>

  • Thank you very much, roni! - Nikita Shchypylov

Through CSS, it's easier:

 .work-examples__li { transition: 1s; } .work-examples__li:hover { // здесь все изменения, которые должны произойти при наведении }

    You do not take into account that the execution context of the function inside the hover and the function that you pass inside setTimeout is different. In this case, when calling a function from setTimeout , the this variable will point to the root window object.

    Working example:

      $('.work-examples__li').hover( // при наведении function(){ var self = this setTimeout(function() { //здесь this указывает уже на window $(self).addClass('newhover'); }, 300); // 1 sek }, // при уходе function(){ var self = this setTimeout(function() { $(self).removeClass('newhover'); }, 300); // 1 sek } ); 
     .newhover{ outline: 1px solid black; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="work-examples__li">test</div> <div class="work-examples__li">test</div> <div class="work-examples__li">test</div> <div class="work-examples__li">test</div>

    PS, but in general, with the help of CSS it is made more convenient and easier.

      Obviously, this is not passed in your code. Do so

       <!DOCTYPE html> <html> <head> <title>titile</title> <meta charset="utf-8"> <style> .work-examples__li { width: 50px; height: 50px; border: 1px solid red; margin: 5px; float: left; cursor: pointer; } .newhover { border-width: 2px; } </style> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function() { $('.work-examples__li').hover( function() { var that = this; setTimeout(function() { $(that).addClass('newhover'); }, 1000); // 1 sek }, function() { var that = this; setTimeout(function() { $(that).removeClass('newhover'); }, 1000); // 1 sek } ); }); </script> </head> <body> <div class="work-examples__li"></div> <div class="work-examples__li"></div> <div class="work-examples__li"></div> </body> </html>

      • Thank you for the answer, it is ALMOST what you need. If you start to quickly move the cursor over the blocks in your code, then they begin to quickly trust again without a timeout. It can be fixed? - Nikita Shchypylov