在 jquery/javascript 中延迟 ondragover 的效果答案

【问题标题】：delay the effects of ondragover in jquery/javascript在 jquery/javascript 中延迟 ondragover 的效果
【发布时间】：2016-08-01 13:33:25
【问题描述】：

我正在尝试淡入 div，因为我以缓慢的速度将它们拖过 10%。但是，如果我超快移动鼠标，它会立即变黑，并带有一些褪色的方块。

问：如何让方块慢慢淡化为黑色 10%，但在用户不再拖动鼠标时能够停止。

在此先感谢，我已经尝试了诸如 .delay 函数之类的技术，但没有成功。

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你可以试试这样的：

(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，它会阻止重置并重新开始计时。

【讨论】：

【解决方案2】：

另一种解决方案是使用 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>

【讨论】：