延迟jquery/javascript中ondragover的效果

delay the effects of ondragover in jquery/javascript

本文关键字：ondragover jquery javascript 延迟更新时间：2023-09-26

我正试图以较慢的速度将div拖过10%，使其淡出。然而，如果我超快速地移动鼠标，它会立即变黑，并带有一些褪色的方块。

Q：如何使正方形慢慢变黑10%，但当用户不再拖动鼠标时能够停止。

提前感谢，我尝试过延迟函数等技术，但没有成功。

(function() {    
    
    //When the mouse drags over the class cell, lower the opacity by 10%
    $('.cell').on('dragover', function () {
        var $currentOpacity = $(this).css("opacity");
        $currentOpacity -= 0.1;
        $(this).css('opacity', $currentOpacity);
    });
    
    
})();

#grid-container {
    width: 398px;
    height: 25px;
    font-size: 0;
    background-color: black;
    position: absolute;
}
.cell {
    margin: 0.5px;
    height: 5mm;
    width: 5mm;
    background-color: white;
    display: inline-block; 
    z-index: 0;
}

<html>
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
  <body>
     <div id="grid-container">
        <div class="row line-1">
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
      </div>
    </div>
  </body>
</html>

您可以尝试以下操作：

(function() {    
    //When the mouse drags over the class cell, lower the opacity by 10%
    $('.cell').on('dragover', function () {
        var $currentOpacity = $(this).css("opacity");
        $currentOpacity -= 0.1;
        var $element = $(this);
        //prevent reset
        clearTimeout($element.resetEvent)
        //update opacity
        $element.css('opacity', $currentOpacity);
        //trigger reset after 2 seconds
        $element.resetEvent = setTimeout(function(){
            $element.css('opacity', 1);
        }, 2000);
    });

})();

如果有2秒钟处于不活动状态，则不透明度将返回到1。但是，如果dragover被触发，它将阻止重置并重新启动时钟。

另一个解决方案是使用CSS转换。将"background-color"的转换添加到类中，并使用新类更改dragover事件中元素的"background-color"。

(function() {    
    
    //When the mouse drags over the class cell, lower the opacity by 10%
    $('.cell').on('dragover', function () {
       /* instead of calculation, only add class to element. */
        $(this).addClass("dragged");
    });
    
    
})();

#grid-container {
    width: 398px;
    height: 25px;
    font-size: 0;
    background-color: black;
    position: absolute;
}
.cell {
    margin: 0.5px;
    height: 5mm;
    width: 5mm;
    background-color: white;
    display: inline-block; 
    z-index: 0;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}
.dragged {
  background-color: black;
}

<html>
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   </head>
  <body>
     <div id="grid-container">
        <div class="row line-1">
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
      </div>
    </div>
  </body>
</html>