jQuery should wait until css transition

Question

I've made a simple slideshow in a div, see my fiddle here: https://jsfiddle.net/5m9Lgj7o/ It's working fine so far.

But I have a css transition for the table:

.gallery-table {
    transition: left 0.5s;
}

The problem is, that when the transition has not finished yet, the calculation of "actLeft" is wrong when clicking to quick on the left or right controls.

How can I tell my functions leftControl.click() and rightControl.click() to wait until transition has ended? Or is this the wrong way?

I tried one() and queue() and delay(), but I don't get the solution...

You can try bxslider which has many more options to control your transitions. — Leo, Jun 16 '15 at 13:28

score 2 · Accepted Answer · edited May 23 '17 at 10:26

2

CC3 generates DOM events, so you can sing on TransitionEnd event. See more info on this answer.

edited May 23 '17 at 10:26

Community

1
1

answered Jun 16 '15 at 13:28

Valentyn Vynogradskiy

633
1
6
22

In addition: To stop events from stacking up, you could use `$().once()`. Or, you could just add an event handler earlier than the click handler. – Katana314 Jun 16 '15 at 13:46

score 1 · Answer 2 · answered Jun 16 '15 at 13:39

1

SetTimeout function will do the work.

See this fiddle.

setTimeout(
            function() {
                alert("Called after delay.");
            },
            2000);

This piece of code is added to each of the click functions

answered Jun 16 '15 at 13:39

Leo

5,017
6
32
55

score 1 · Answer 3 · answered Jun 16 '15 at 13:41

1

I think, the most "straight" solution for your task is to use $.animate() http://api.jquery.com/animate/

answered Jun 16 '15 at 13:41

azaviruha

896
1
7
14

jQuery should wait until css transition

3 Answers3