在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

回答

相關問題