Encountering issues with jQuery animations specifically in Safari 5 on my Windows system.
Struggling with a simple image fade slider that still has some flickering. The slider involves click events moving two pages at once, one active page right and the other inactive page left.
The script used can be accessed here: fiddle
The key point is switching classes to utilize CSS3 animations for element movement, although previously jQuery was used with similar results.
$('.page.inactive').addClass('moveRight').find('#blurWall').addClass('moveLeftBlur');
$('.page.active').addClass('moveLeft').find('#blurWall').addClass('moveRightBlur');
These additional classes have the following styles:
.moveRight
{
-webkit-animation-name: moveRight;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes moveRight
{
from { left:-1286px; }
to { left:107px; }
}
.moveLeft
{
-webkit-animation-name: moveLeft;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes moveLeft
{
from { left:107px; }
to { left:-1286px; }
}
The website can be found at:fiddle
All images are optimized for web use. The link above is purely for observing the effect and functions flawlessly in Chrome.
Any suggestions on eliminating the lag?