Delayed transition only in certain situations

Question

I have 4 overlays inside a container (overflow: hidden) translated horizontally 100% on default. .active on the .overlay animates it into view. activating another one removes .active from the current one and adds .active to the new one.

Now I want a transition delay on the "new active" element, because animating both the old and the new overlay at once results in inconsistent visuals (overlays overlaying each other etc.). And both animating simultaneously feels too hasty.

My first approach: sibling selector to delay the transition for all siblings of the .active, didn't work out, since the sibling selector doesn't look "behind" or "around" ...

Second approach: class on parent atLeastOneIsActive and then apply transition-delay to .active. Didn't work aswell, because both the new and the old overlay then get a transition-delay, making all even worse.

Unfortunately I can't show you the live example. The question is more in general anyways; but to get a picture of the result here 2 screenshots

hover on either pin or link

overlay displayed

I'm looking for a clean and sweet way to apply delays in certain situations. jQuery is only used for class management.

Answer 1

activating another one removes .active from the current one and adds .active to the new one.

Is this "activation" made with jQuery .on("mouseover", function(){?
Because if you add and remove classes this way, why not simply use setTimeout on the .addClass()?

-------------------------
EDIT

I worked on it a while.
And I'm pretty sure to have a solution...

Let's say I found the exact nature of you specific problem, to be more exact.

I reproduced your problem and the solution in a fiddle.
But before you have a look to it, please read my explanations:

The image transitions are overlapping.
And that is because of their width versus their animation start position. Since they are pushed to outer right of the viewport at a specific distance...

This distance is not enought versus the with of the images. It has to be twice (minimum) the larger image.
I found it by setting them all to a same size.
This is not mandatory... But sure is a good thing!

So, the solution is to push them twice this "max-width" away from the right side of the viewport.

I made a Fiddle and made 4 buttons (representing your map pins) to animate the images. I also assigned keyboard numbers to them, so it's easyer to closely watch the images without having to target the buttons with the mouse. ;)

And finally, there is a button "Toggle class equalSize" which forces the images to all the same size.

Have a look now!
:D

.active {
    right:0;
}
img{
    position:fixed;
    right:-1200px;
    top:100px;
    transition: right 2s;
}
.equalSize{
    width:600px;
    height:450px;
}