marginLeft 的 jquery 动画在 Safari 中导致奇怪的跳跃答案

【问题标题】：jquery animation of marginLeft causes weird jump in SafarimarginLeft 的 jquery 动画在 Safari 中导致奇怪的跳跃
【发布时间】：2012-12-29 23:40:03
【问题描述】：

我构建了一个图像滑块，它使用 jquery 创建图像“循环”。如果您向右走，则第一个图像将被添加到末尾。如果你向左走，最后一张图片会在开头出现。 margin-left-value 用于创建滑动外观。到目前为止它似乎有效，但在 Safari 中，边距的动画不起作用。它应该使用缓动函数在 -100px 和 -200px 之间缓和。但是有大约 4000px 的值。

还有其他人在 Safari 中遇到了这些跳跃问题，但我没有找到解决方案。

这里是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%');
});
}

我没有作弊，因为问题在 960 格系统内部更加明显。这是链接：http://www.goldentree.de/wordpress/

【问题讨论】：

$inner.append(...);被注释掉，以便更容易关注问题。动画设置为 8 秒，以便观看。
我发现，Safari 似乎存在负边距问题。如果我使用正值，它会按预期工作。我可以采取什么措施来对抗这种行为，还是必须找到没有负边距的解决方案？

标签： jquery safari jquery-animate margin

【解决方案1】：

为避免此问题，请在现代浏览器中使用 CSS 过渡，在其余浏览器中使用 jQuery 动画。我建议使用modernizr 来识别谁支持CSStransitions。

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

【讨论】：

效果很好！谢谢你。我没有尝试，因为我认为负值是问题所在。
我认为从技术上讲，负值是与 Safari 5 和 jQuery animate 结合使用时的问题。这种方法只是删除了等式的 jquery animate 部分。很高兴它成功了。

【解决方案2】：

只是我对@Jason 的回答。

cssOrAnimate = Modernizr.csstransitions ? 'css' : 'animate';
$('#gallery .slides')[cssOrAnimate]({marginLeft:'-200%'});

【讨论】：