在jquery中延迟ondragover的效果/ javascript

我试图淡化divs，因为我以10％的速度拖慢了它们。然而，如果我快速移动鼠标，它会立即变黑，并且会有一些淡色方块。在jquery中延迟ondragover的效果/ javascript

问：如何让方块慢慢地向黑色褪色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>

来源

2016-08-01 ShortyVee

你可以尝试这样的事：1。但是，如果dragover被触发

(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秒，不透明度返回，它可以防止复位并重新开始时钟。

来源

2016-08-01 13:37:42 stackoverfloweth

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

来源

2016-08-01 13:43:50

在jquery中延迟ondragover的效果/ javascript

回答

相关问题