keep resizing element while mouse button is down

qadenza :

how to keep resizing an element continiously while mouse button is down?
I tried with mousedown - without success.

$('button').on('mousedown', function(){
let targ = $('.targ');
let x = targ.height();
x++;
targ.height(x);
});
.targ{background:orange;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>PRESS</button>
<br><br>
<div class='targ'>LOREM</div>

SametC :

you can add an setInterval() to your mousedown event, and clear it on mouseup

here are an working example of setting it to 50 milliseconds:

    var interval;
$('button').on({
  mousedown: function() {
    interval = setInterval(function() {
      let targ = $('.targ');
      let x = targ.height();
      x++;
      targ.height(x);
    }, 50);

  },
  mouseup: function() {
    window.clearInterval(interval);
  }
});

Working fiddle also here: https://jsfiddle.net/qytd5h1n/2/

hope it helps :)

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=302704&siteId=1