there is a list of divs, an animation on hover hangs on each of them, the list is sorted every 5 seconds, a div with the exposed class is thrown to the beginning:

 $('#list').prepend($('#list .online'));

if you leave the mouse on the first element, once every 5 seconds, the animation is reset and resumes

Is it possible to somehow freeze the hover before sorting in order to avoid blinking?

added:

example of the problem site implementation: https://jsfiddle.net/gwqn0cd0/

  • It would be great to look at an example that shows the problem - Mr. Black
  • @Doofy, added an example - ravend
  • Well, now at least I understand the question. It had to be formulated differently. How to leave in the same position the element that you hover over . Right? - Mr. Black
  • @Doofy, sorry, the proposed version did not solve the problem - ravend
  • So I relied on the question without an example. Now I also do not really understand what needs to be done - Mr. Black

1 answer 1

You can pause the animation.

 function reset(e) { e.style = 'animation-play-state: paused'; setTimeout(function() { e.style = ''; }, 2000); } 
 div { background: #63AEEE; border-radius: 2px; padding: 2px 8px 4px 8px; cursor: pointer; color: #FFF; transition: .5s; display: inline-block; } div:hover { animation: ani 2s infinite ease-in-out; } @keyframes ani { 0% { background: #FF6040; } 50% { background: #63AEEE; } 100% { background: #FF6040; } } 
 <div onclick='reset(this)'>qeqqe</div>

Or disable the events via styles

pointer-events

 function off() { $('div').css({'pointer-events': 'none'}); } function on() { $('div').css({'pointer-events': 'all'}); } 
 div { background: #63AEEE; border-radius: 2px; padding: 2px 8px 4px 8px; cursor: pointer; color: #FFF; transition: .5s; display: inline-block; } div:hover { background: #FF6040; } 
 <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script> <div>qeqqe</div> <button onclick='off()'>Отключить hover</button> <button onclick='on()'>Включить hover</button>

  • Explain a minus - Mr. Black
  • I did not minus you - ravend
  • @ravend, some moor crawled and washed off without explanation, okay - Mr. Black