Trouble with controlling sliding backgrounds

[Storm08]

Hi all,

I’m making a website (html5/css3) and I’ve run into something I’m not sure how to do.

I have links down the left hand side, when you hover over the links the respective page background slides into view from the right hand side of the screen. If you click the link then it loads the page and jumps to the different background image, instead of sliding.

How do I keep the sliding animation going if a link is clicked before the hover animation is over?

CSS:

.container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}

.container img
{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -60;
}

.container li img
{
position: absolute;
top: 0;
left: 2000px;
z-index: -50;
-webkit-transform: translateZ(0);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

nav
{
position:absolute;
z-index: 600;
bottom: 40px;
width: 100%;
height: 100%;

}

nav h1
{
padding: 20px;
color: #ccc;
text-align: right;
font: 28px Georgia, Times, serif;
}

ul
{
position:absolute;
z-index: 30;
width: 100%;
height: 100%;
list-style: none;
}

li a
{
z-index: 1;
display: block;
padding-left: 20px;
padding-top: 15px;
width: 230px;
height: 50px;
color: #68D;
text-decoration: none;
font: 22px/30px Helvetica, Verdana, sans-serif;
font-variant:small-caps;
}

HTML:

Home


Videos


Contact

Any help would be very much appreciated! :)
Cheers,
Storm08

[Paulie_D]

>Can you post a simple version of your site on http://codepen.io?

With working images.

However, I’m pretty sure the answer will be javascript to handle the whole thing.

[Storm08]

Sorry about wait, thanks very much for the replies!

here you go:

http://cdpn.io/IfjDk

[Author]

Posts