如何临时禁用元素的CSS悬停触发的动画？

Question

Consider this slider:

 $(function() { var $volumeBar = $('#Volume-Bar'); var $volumeContainer = $('#Volume-Container'); var $value = $('.value'); $volumeContainer.on('mousedown', function(event) { var height = $volumeContainer.height(); var top = $volumeContainer.position().top; var startingCoord = event.clientY - top; var currentCoord; var percent; var difference; seekingVol = true; $volumeBar.css({ 'background-color': '#dcb311', }); $volumeContainer.on('mouseup mouseleave', function() { if (seekingVol) { seekingVol = false; $volumeBar.css({ 'background-color': '', }); } }); $volumeContainer.on('mousemove', function(event) { if (seekingVol) { currentCoord = event.clientY - top; percent = ((height - currentCoord) / height) * 100; $volumeBar.finish(); $volumeBar.css({ 'height': percent + '%' }); } }); }); }); 

 @import url(https://fonts.googleapis.com/css?family=Bitter:700); #Volume-Container { position: relative; width: 75px; height: 150px; background-color: #0e2030; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } #Volume-Bar { position: absolute; bottom: 0px; height: 30%; width: 100%; background-color: #6ab2f2; transform-origin: bottom; } #Volume-Bar:hover { background-color: #dcb311; animation: Vert-Bounce 0.6s; } @keyframes Vert-Bounce { 0% { transform: height(1); } 25% { transform: scaleY(1.3); } 50% { transform: scaleY(1); } 75% { transform: scaleY(1.15); } 100% { transform: scaleY(1); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Volume-Container"> <div id="Volume-Bar"></div> </div> 

Notice the bounce animation on the bar on hover?

When the user pulls the bar upward, the mouse exits the element due to the lag between the bar's scaling and the movement of the mouse. When the element catches up to the mouse or the user pulls back downward, another hover event is fired as the mouse re-enters the element. This triggers the bounce animation multiple times as the user drags the bar. I want to disable this animation on mousedown and re-activate it on mouseup .

How can I do this?

Answer 1

If I understand well, the bouncing animation occurs on dragging.
And this is the problem.

I tried something that may be of interest. I used mouseover and mouseout events in event listeners functions... Instead of the CSS hover to handle the bouncing effect.

$(function() {

  var $volumeBar = $('#Volume-Bar');
  var $volumeContainer = $('#Volume-Container');
  var $value = $('.value');

  $volumeBar.on('mouseover', function(event) {      // Added this event function
    $volumeBar.css({"background-color":"#dcb311","animation":"Vert-Bounce 0.6s"});
  });

  $volumeBar.on('mouseout', function(event) {       // Added this event function
    $volumeBar.css({"background-color":"#6ab2f2","animation":"initial"});
  });

  $volumeContainer.on('mousedown', function(event) {
    var height = $volumeContainer.height();
    var top = $volumeContainer.position().top;
    var startingCoord = event.clientY - top;
    var currentCoord;
    var percent;
    var difference;
    seekingVol = true;
    $volumeBar.css({
      'background-color': '#dcb311',
    });
    $volumeContainer.on('mouseup mouseleave', function() {
      if (seekingVol) {
        seekingVol = false;
        $volumeBar.css({
          'background-color': '',
        });
      }
    });
    $volumeContainer.on('mousemove', function(event) {
      if (seekingVol) {
        currentCoord = event.clientY - top;
        percent = ((height - currentCoord) / height) * 100;
        $volumeBar.finish();
        $volumeBar.css({
          'height': percent + '%'
        });
      }
    });
  });
});

See Fiddle : https://jsfiddle.net/Bes7weB/8fpqxhoe/

NOTE:
I added a 6px padding to it: In order to prevent the mouse from mouseout on drag.
This may be a problem...