1

Everything works here but I need to keep moving act up and down while mouse button is pressed, without repeated clicks.

Any help?

$('button').on('click', function(){
 let a = $('.act');
 a.insertBefore(a.prev());
});

$('button').on('contextmenu', function(e){
 e.preventDefault();
 let a = $('.act');
 a.insertAfter(a.next());
});
.act{background:gold;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class='title act'>LOREM</div>
<div class='title'>IPSUM</div>
<div class='title'>DOLOR</div>
<div class='title'>SIT</div>
<div class='title'>AMET</div>
</div>
<br>
<button>CLICK</button>
qadenza
  • 9,025
  • 18
  • 73
  • 126
  • 1
    What does 'while mouse button is pressed' mean? You want an animation to start on mousedown and end on mouseup? Or are you expecting the user to be making repeated clicks? – TKoL Nov 22 '19 at 15:59
  • @TKoL, no, without repeated clicks, just continue to move while mouse is pressed – qadenza Nov 22 '19 at 16:00
  • This question should help: https://stackoverflow.com/questions/15505272/javascript-while-mousedown You need to check if the mouse is still down at certain intervals. – Sam Walpole Nov 22 '19 at 16:07

2 Answers2

1

I've made a fiddle to illustrate:

https://jsfiddle.net/10cgxohk/

html:

<p class="">x</p>

css:

.move {
  animation: MoveUpDown 1s linear infinite;
  position: relative;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 15px;
  }
}

javascript:

$('body').on('mousedown', function() {
    $('p').addClass('move');

  $('body').on('mouseup', function() {
    $('p').removeClass('move');
    $('body').off('mouseup');
    console.log('here');
  })
});

This is really rough and creates an issue if you have other 'mouseup' callbacks on the body, but if that's not a worry for you then it should work. The javascript is adding a class to the element, and the class is animated in css

TKoL
  • 13,158
  • 3
  • 39
  • 73
  • I think you misunderstood their question. My understanding from their code is that they wish to move the `act` class from each div to the next. If don't think they want a actual animation. – Sam Walpole Nov 22 '19 at 16:10
  • oh haha well... anyway, my mousedown / mouseup code can be modified if they need to to do that. – TKoL Nov 22 '19 at 16:11
1

Instead of the click and contextmenu events you'll have to use mouse events, here is an example:

let intervalId;
const a = $('.act');
$('button').on('mousedown', function(event) {
   function fn () {
    if (event.button == 0) {
      a.insertBefore(a.prev());
    } else if (event.button == 2) {
      a.insertAfter(a.next());
    }
    return fn;
  };
  intervalId = setInterval(fn(), 500);
});

$(document).on('mouseup', function(event) {
  clearInterval(intervalId);
});

$('button').on('contextmenu', function(event) {
  event.preventDefault();
});
.act {
  background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class='title act'>LOREM</div>
  <div class='title'>IPSUM</div>
  <div class='title'>DOLOR</div>
  <div class='title'>SIT</div>
  <div class='title'>AMET</div>
</div>
<br>
<button>CLICK</button>

In this example, I'm using an interval to move the element every 500 milliseconds while the mouse pointer is down, I'm also preventing the contextmenu event so that the context menu will not consume the mouseup event itself.

Titus
  • 22,031
  • 1
  • 23
  • 33