jquery - jQuery 中的 .animate 给出了意想不到的结果

Question

我正在将客户的站点从 Flash 传输到 HTML，使用 jQuery 来复制 Flash 动画的效果。这一特定的使用 .animate 来更改 CSS 中“top”的值。所有受影响的元素都将其 CSS 位置设置为绝对或相对。

这是最重要的更改代码:

function maskUp(height, length) {
    var contentMask = $('#left-content .content-mask');

    contentMask.animate({top: 312}, 500, function(){
        contentMask.delay(100).animate({top: height}, length, function(){
            contentMask.children('.active').removeClass('hide');
        });
    });
}

(编辑:站点地址已删除)

每次我点击“重新加载”时，动画都会起作用，但是如果我只是选择地址栏并点击 Enter，当动画完成时，元素会跳转到与预期完全不同的位置。 Chrome 的开发人员工具显示它具有正确的“top”值，但它位于错误的位置，并且更改 Chrome 开发人员工具中的值根本不会改变位置，让我觉得我已经以某种方式破坏了它.

提前致谢!

Answer 1

好吧，问题是(据我所知)是它不断地将视口(viewport)跳转到您的 a-sorry-state div 的位置。如果您传递 id 作为页面的 location.hash，它将滚动到具有该 id 的元素。因此，我会说使用查询参数而不是 url 的哈希部分。查看 tabs.js 中的代码，我想说您可以更改以下函数

function getHash( url ) {
    var hashPos = url.lastIndexOf ( '#' );
    return url.substring( hashPos + 1 );
}

至

/*might want to change the name too*/
function getHash() {
    return location.search.slice(1); // .search will return the part of the url
                                     // that follows the ? symbol. string.slice(1)
                                     // returns all but the first character of
                                     // the string (the ?).
}

然后使用类似

的 url

http://panaceaentertainment.com/wp/television?a-sorry-state