Question

I built an image slider that uses jquery to create a “loop” of images. If you go to the right, the first image is prepended to the end. If you go to the left the last image is attended at the beginning. The margin-left-value is used to create a sliding look. It seems to work so far, but in Safari the animation of the margin doesnt work. It should use an easing function to ease between -100px und -200px. But there are values about 4000px.

There are other people, who have those jumping problems in Safari, but I found no sollution.

Here is the js:

window.onload = function ()
{
$inner = $('#wdgt_slider #inner');
$active = $('#wdgt_slider').children().first();
$slides = $('#wdgt_slider').children().length;

$inner.prepend($inner.children().last()).css({'-webkit-transition':' ', '-moz-transition':' ', '-o-transition':' ', 'transition':' ', 'marginLeft':'-100%'});

$('#wdgt_slider').delegate('input[type=radio]', 'change', function()
{
    if($(this).attr("checked") == "checked")
    {
        if( $(this).index() == ($inner.children().length-1) && $active.index() == 0 )
        {
            prev();
        }
        else if( $(this).index() == 0 && $active.index() == ($inner.children().length-1) )
        {
            next();
        }
        else if( $(this).index() < $active.index() )
        {
            prev();
        }
        else if( $(this).index() > $active.index() )
        {
            next();
        }
        $active = $(this);
    }
});
}

function next()
{
$inner.animate({
    marginLeft:"-200%"
},8000, $.easie(0.77, 0, 0.175, 1),function()
{
    //$inner.append($inner.children().first()).css({'-webkit-transition':' ', '-moz-transition':' ', '-o-transition':' ', 'transition':' ', 'marginLeft': "-100%"});
});
}

function prev()
{
$inner.animate({
    marginLeft:"0"
},8000, $.easie(0.77, 0, 0.175, 1), function()
{
    $inner.prepend($inner.children().last()).css('marginLeft', '-100%');
});
}

I didn’t make a fiddle, because the problem is more obvious inside the 960 grid system. Here is the link: http://www.goldentree.de/wordpress/

Answer 1

TO avoid this issue, use CSS Transitions for modern browsers and jQuery animate for the rest. I recommend using modernizr to recognize who supports CSStransitions.

if( !Modernizr.csstransitions ){
  $('#gallery .slides').animate({"margin-left":'-200%'}, 750);
} else {
  $('#gallery .slides').css({"margin-left":'-200%'});
}