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');
        });
    });
}

（编辑：删除了网站地址）

每次点击Reload时动画都会起作用，但是如果我只选择地址栏并按Enter键，那么当动画完成时，元素会跳转到一个完全不同的地方。 Chrome的开发者工具显示它具有正确的“顶级”价值，但是它位于错误的位置，而改变Chrome开发者工具的价值并没有改变位置，让我觉得我已经以某种方式打破了它

提前致谢！

Answer 1

很抱歉没有真正的答案，只需要深入了解。

它与您的灯箱有什么关系吗？我可以看到，当您重新加载时，顶部样式与您的id =“lightbox”不同，而在地址栏上按Enter键。

如果删除灯箱代码会怎样？

Answer 2

好的，问题是（据我所知）是它不断地将视口跳到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 ?).
}

然后使用类似

的网址

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

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

2 个答案: