Question

考虑这个滑块：

$(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>

注意悬停时栏上的反弹动画？

当用户向上拉动条时，由于条形缩放和鼠标移动之间的滞后，鼠标会退出元素。当元素赶上鼠标或用户向下拉回时，鼠标重新进入元素时会触发另一个悬停事件。当用户拖动栏时，这会多次触发反弹动画。我想在mousedown上停用此动画并在mouseup上重新激活它。

我该怎么做？

Answer 1

如果我理解的话，在拖动时会发生弹跳动画这就是问题。

我尝试了一些可能感兴趣的东西。我在事件侦听器函数中使用了mouseover和mouseout个事件...而不是CSS hover来处理弹跳效果。

$(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 + '%'
        });
      }
    });
  });
});

请参阅小提琴：https://jsfiddle.net/Bes7weB/8fpqxhoe/

注意：
我为它添加了一个6px填充：为了防止鼠标拖动鼠标这个可能是一个问题......

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

1 个答案: