延迟jquery/javascript中ondragover的效果
延迟jquery/javascript中ondragover的效果
提问于 2016-08-01 21:33:25
我正在尝试淡入div，因为我以缓慢的速度拖动了10%的div。但是，如果我以超快的速度移动鼠标，它会立即变黑，并出现一些褪色的方块。
问:如何让正方形慢慢淡入黑色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>
回答 2
Stack Overflow用户
发布于 2016-08-01 21:37:43
您可以尝试如下所示：
(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，则会阻止复位并再次启动时钟。
Stack Overflow用户
发布于 2016-08-01 21:43:51
另一种解决方案是使用CSS transitions。将"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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38700270
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号