Issues with jQuery delay function

Question

I am working on a customer review section of my page where it has a div showing names in a row and an arrow that moves to each name after a few seconds. However, when I type in my jQuery for it to wait a few seconds so clients can read the first testimonial, it automatically jumps the number of pixels, despite the fact that I put in the code to delay that. What's going on here?

HTML:

<div class="cust-name div-box" style="padding: 0;">
   <div class="d-flex flex-row justify-content-around">
       <p>Zach</p>
       <p>Zach</p>
       <p>Zach</p>
       <p>Zach</p>
   </div>
   <div class="arrow-up"></div>
</div>

jQuery:

var $upArrow = $('.arrow-up');

// $(document).ready(function() {
//     $upArrow.delay(5000).css("left", "50px");
// });

$upArrow.hide();
$upArrow.show(2000).css("left", "25px");
$upArrow.delay(2000);
$upArrow.css("left", "50px");

Alexander Topalo · Accepted Answer · 2018-08-19 22:09:45Z

1

From docs:

It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

.css() do not use effects queue, so, the better way is to use setTimeout();

For your code:

$upArrow.hide().show(2000).css("left", "25px");
setTimeout(function() { $upArrow.css("left", "50px"); }, 2000);

answered Aug 19, 2018 at 22:09

Alexander Topalo

364 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shane Harper Over a year ago

Just put that in my code and it works! Thanks for your help! I know I'm trying to reinforce my jQuery and JS learning so that way I won't forget it so simple things like this helps!

Shane Harper Over a year ago

I have another question - how would I loop through the timeout functions infinitely so that way it automatically shows the testimonials?

Alexander Topalo Over a year ago

Use setInterval instead of setTimeout

Michael Alexander · Accepted Answer · 2018-08-19 21:29:15Z

0

I've had problems with jquery's delay method as well. Instead you could try using setTimeout();.

Try this:

$upArrow.hide();

$upArrow.show(2000).css("left", "25px");

var alterCss = function() {
 $upArrow.css('left', '50px');
};

setTimeout(alterCss, 2000);

I'm not sure if this will work for you, but it would be the first thing I would try since setTimeout should provide the same effect.

answered Aug 19, 2018 at 21:29

Michael Alexander

4801 gold badge4 silver badges16 bronze badges

1 Comment

Michael Alexander Over a year ago

I think the reason you're having trouble with delay() is because it is meant to be chained with other function calls. For instance: $upArrow.show(2000).css("left", "25px").delay(2000).css("left", "50px"); But I'm not sure if that would work for you. I recommend that you just try different ways and one is bound to work.

Collectives™ on Stack Overflow

Issues with jQuery delay function

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related