开发者

.animate in jQuery giving unexpected results

I'm transfering a client's site from Flash to HTML, using jQuery to replicate the Flash animation's effects. This particular one uses .animate to change the value for "top" in CSS. All affected elements have their CSS position set to absolute or relative.

Here's the top-changing code:

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

(edit: site address removed)

The animation works every time I hit Reload, however if I just select the address bar and hit Enter, when the animation completes, the element jumps to a completely different place than it's supposed to. Chrome's developer tools show that it has the correct value for "top", however it is in the wrong place, and changing the value in Chr开发者_Go百科ome's developer tools doesn't change the position at all, making me think that I've broken it somehow.

Thanks in advance!


Ok so what the issue is (as far as I can tell) is that it keeps jumping the viewport to the location of your a-sorry-state div. If you pass an id as the location.hash of a page, it will scroll to that element with that id. Thus, I would say use a query parameter instead of the hash part of the url. Looking at your code in tabs.js I would say you could change the following function

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

to

/*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 ?).
}

And then use a url like

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


Sorry no real answer for you, just something to look into.

Does it have anything to do with your lightbox? I can see that the top style is different for your id="lightbox" when you reload vs. press enter on address bar.

What happens if you remove the lightbox code?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜