Question

我正试图淡化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>

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

Answer 2

另一种解决方案是使用 CSS过渡。将_distinguishedNames的转化添加到您的班级，并使用新班级更改"background-color"活动的"background-color"元素。

＆＃13;

dragover

＆＃13;

(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");
    });
    
    
})();

＆＃13;

#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;
}

＆＃13;

在jquery / javascript中延迟ondragover的效果

2 个答案: