i'm trying fade divs in drag on them 10% @ slow rate. however, going black instantly, faded squares if move mouse super fast.
q: how make square fade towards black 10% able stop when user no longer dragging mouse.
thanks in advance, i've tried techniques such .delay function no success.
(function() { //when mouse drags on class cell, lower opacity 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>
you try this:
(function() { //when mouse drags on class cell, lower opacity 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); }); })(); if there ever 2 seconds of inactivity, opacity returns 1. if dragover triggered, prevents reset , starts clock on again.
Comments
Post a Comment