Question

我写了一个基于jQuery的滑动脚本。要记住，哪个幻灯片当前处于活动状态，并在重新加载时恢复此幻灯片，location.hash会更新。在Chrome中，这很好用。在Opera和Firefox中，动画显示了一些奇怪的行为。虽然CSS属性更新为正确的值，但滑动在两个幻灯片之间完成。仅当location.hash属性更新时，才会出现此行为。

结合这两种机制时是否存在已知的并发症？我无法想象他们是如何相互影响的。

相关的JavaScript代码：

var currentPage = 0;
var lock = false;
var transitionTime = 500;

function changePage( direction ) {
    if( lock )
        return;

    var currIndex = currentPage;
    var nextIndex = currentPage + direction;

    var cPage = $( '#page' + currIndex );
    var nPage = $( '#page' + nextIndex );

    if( cPage.length == 0 || nPage.length == 0 )
        return;

    // Set lock
    lock = true;

    // Animate scrolling container
    var newPosition = -800 * nextIndex;
    $( '#scroller' ).animate( {
        left: newPosition
    }, transitionTime, function() {
        // Remove lock
        lock = false;
    } );

    currentPage = nextIndex;
    location.hash = 'page' + nextIndex;
}

jsFiddle从地址栏中移除/show/以访问jsFiddle编辑页面。通过箭头键完成导航。

Answer 1

经过测试，当滚动条div向左移动时，似乎包装器div向左移动了一点。将包装器div的位置更改为fixed，它将解决您的问题。

div#wrapper {
    height: 220px;
    left: 50%;
    margin-left: -375px;
    margin-top: -150px;
    position: fixed;
    top: 50%;
    width: 680px;
}

快乐的编码！以下是示例fiddle。

与location.hash一起使用时，与jQuery.animate（）并发

1 个答案: