。jQuery中的动画给出了意想不到的结果

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

这里是顶级的更改代码：

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

（编辑：网站地址删除）

的动画作品每次我打刷新时间，但如果我只是选择了地址栏敲回车，当动画完成时，元素跳转到完全不同的地方。 Chrome的开发人员工具表明，它具有“顶级”的正确价值，但它存在错误的地方，改变Chrome开发人员工具的价值并没有改变立场，这让我认为我已经以某种方式破坏了它。

在此先感谢！

来源

2011-08-23 Gotcat

好的，问题是什么（据我所知）是它不断跳到您的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

来源

2011-08-23 17:45:52

啊，一个跳跃的视口会解释它。这听起来像是一个合理的解决方案，但是我使用散列代替搜索查询的原因是，当用户单击链接时页面不会重新加载。我会尝试改变散列标签，以便没有ID与散列相同。 – Gotcat

@Gotcat据我所知，搜索参数不会导致完全重新加载。它应该同样工作 –

很高兴知道，谢谢约瑟夫！虽然，在我阅读您的回复之前，我已经更改了散列标签，并解决了问题（视口跳跃是问题）。再次感谢！ – Gotcat

对不起，没有真正的答案给你，只是要看看。

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

如果您删除灯箱代码，会发生什么情况？

来源

2011-08-23 17:44:58 wightnoise

这已经发生在网站，因为在我添加灯箱代码之前，并删除它后，问题依然存在。 – Gotcat

。jQuery中的动画给出了意想不到的结果

回答

相关问题