simulate a "click and hold for 5 sec" on element with jquery

Question

I have done some CSS3 transitions on an element, using the "active" selector. What I need now is to program the "click and hold for 4-5 sec" behavior on that element, when the page loads, without having the user to actually click on it.

Is there a way to simulate the "click and hold" for a specific amount of time, either with jQuery or javascript?

Something like

$('div').click(5000);

which obviously does not work.

Thanks!

Why can't you just initiate whatever the click-and-hold functionality is? — Dave Newton, Feb 02 '16 at 14:43
It's always better practice (not to mention more reliable) to directly call the function that is triggered under an event instead of faking the event itself. — Rory McCrossan, Feb 02 '16 at 14:45
You should define a CSS rule holding for pseudo `:active` class and a class `.active`. Then in jQuery, set this class to element and remove it after some delay $('div').addClass('active').delay(5000).queue(function(){$(this).removeClass('active');}); — A. Wolff, Feb 02 '16 at 15:08
@DaveNewton OP is talking about pseudo `:active` class i think, running CSS transition — A. Wolff, Feb 02 '16 at 15:08
@A.Wolff thank you, that is exactly what I am trying to do and it works beautifully in your example. However, when I try it myself, it fails. CSS is div {background:url(...) no-repeat center top; transition:all 3s linear;} div:active, div.active {background-position:center bottom}. When clicked and held, the background scrolls nicely from top to bottom. However when I put -- $('div').addClass('active'); -- nothing happens. What should I change? — Vlad Popescu, Feb 03 '16 at 16:13

score 2 · Answer 1 · edited Feb 02 '16 at 15:04

2

If you insist on having to simulate it with JQuery, mousedown event should work. Something like this:

$('div').mousedown(function(){
    setTimeout(function(){ $('div').mouseup(); }, 5000);
});

Good luck.

edited Feb 02 '16 at 15:04

A. Wolff

74,033
9
94
155

answered Feb 02 '16 at 14:50

Devaffair

182
14

1

I guess no, it won't work this way – A. Wolff Feb 02 '16 at 15:04

score 0 · Answer 2 · answered Feb 02 '16 at 14:52

0

You can use the following, using the "delay" of jQuery

$('div').
    mouseenter(function(){ 
        // some code 
    }).delay(5000).mouseleave(function(){ 
                   // some code
    });

answered Feb 02 '16 at 14:52

dexhering

422
3
13

I love it that you used "delay", however, this will not work as it will simulate the "hover" action rather than the "click". – Devaffair Feb 02 '16 at 14:57

score 0 · Answer 3 · answered Feb 02 '16 at 15:15

You could use triggers.

$(function(){
  
  // Bind mousedown/mouseup events
  $('.box')
  .on('mousedown', function(){
    $(this).addClass('active');    
  })
  .on('mouseup', function(){
    $(this).removeClass('active');
  });
  
  // Trigger mousedown
  $('.box').trigger('mousedown');
  // Trigger mouseup 5s later
  setTimeout(function(){
    $('.box').trigger('mouseup');
  },5000);
  
  
});

.box{
  width: 100px;
  height: 100px;
  border: 3px solid #f00;
}

.active{
  background: #f00;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box"></div>

simulate a "click and hold for 5 sec" on element with jquery

3 Answers3

Linked