浏览器＆QUOT;返回]按键与jQuery的动画页 [英] Browser "Back" Button vs. jQuery-animated page

问题描述

我有一个具有挑战性的问题我一直在争夺一段时间。

I have a challenging problem I've been battling for some time now.

的问题：当我使用浏览器的后退按钮返回到previous页面，该页面将显示在它的最终状态所有的动画过起了。我希望它在它的初始状态显示和重播动画。

我的网站使用一些基本的jQuery的动画。各页面的初始状态具有隐藏的浏览器窗口的下边缘下方的主要内容，当窗口负载，主要内容动画最多出现在浏览器。当访问者点击任何菜单链接，主要内容再次卷起并消失在浏览器窗口的上边缘上方 - 然后新的页面加载。整个事情与code这两个位来实现的：

My site uses some basic jQuery animation. The initial state of each page has the main content hidden below the lower edge of the browser window, When the window loads, the main content animates up to appear in the browser. When a visitor clicks any menu link, the main content rolls up again and disappears above the upper edge of the browser window - and then the new page loads. The whole thing is achieved with these two bits of code:

//Animate the content up from below the browser window

$('#maincontent').animate({top: "15%"}, 2000);

和

//Animate the content up to hide above the browser window

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;
    $('#maincontent').animate({
        top: '-300%'
    }, 500,
    function() {
        window.location = href;
    });
});

的问题：如何使在它的初始状态页面显示后面被点击浏览器的按钮时，

我浏览计算器一段时间。有人问这个问题了很多，但没有一个人似乎已经到达了果然奏效的解决方案。建议包括阻止被缓存的页面 - （不起作用，即使它的工作，岂不是非常有成效的，因为某些页面确实需要被缓存） - 重新加载页面（导致了一些特殊的行为，并最终没有按'将不起作用，要么） - 使用cookie（code没有具体的例子给出的任何地方），或使用PHP（code没有具体的例子给出的任何地方）。我问了几个问题，关于这个网站，并获得了多项建议，但他们都不在我的处境工作。于是几个不眠之夜后，我想问一下，如果有人能真正帮助这一点。

I browsed StackOverflow for some time. People asked about this issue a lot but no one seem to have arrived to a solution that really worked. Suggestions include blocking the page from being cached – (doesn't work, and even if it worked, wouldn't be very productive because some pages do need to be cached) – reloading the page (leads to some peculiar behaviors and ultimately doesn't work, either) - using cookies (no specific example of code is given anywhere) or using php (no specific example of code is given anywhere). I asked several questions about in on this site and received a number of suggestions but none of them worked in my situation. So after a couple of sleepless nights I want to ask if someone can really help with this.

如果有人之前成功地处理了这万阿英，蒋达清，我将不胜感激，如果你可以分享你的专业知识，并提出可行的解决方案！

If someone had dealt with that probelm before successfully, I would be grateful if you could share your expert knowledge and suggest a workable solution!

新的编辑：我想我可能已经找到了解决办法，，但我想一个人的使用jQuery / JavaScript语法帮助。我想尝试修改code多了一个操作添加到它，但我不知道如何前的位置改变到新页面写出来，这样的页面重新加载了一下因此，而不是上面显示的第二个片段，我想这样写的：

NEW I think I may have found a solution, but I want someone's help with jQuery/JavaScript syntax. I want to try to modify the code to add one more action to it, but I'm not sure how to write it, so that the page reloads a moment before the location is changed to the new page So instead of the second snippet shown above, I want to write something like this:

//Animate the content up to hide above the browser window

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;
    $('#maincontent').animate({
        top: '-300%'
    }, 500,
    function() {
    // a code that reloads the same page, something like
    //window.location = window.location; followed by
        window.location = href;
    });
});

- 但我只是不知道如何将其正确写入。

-- but I just don't know how to write it correctly.

或者或许是可能的页面的CSS值从css文件重置为默认的值，并触发JavaScript的一次？

Alternatively, perhaps it's possible to reset the css values of the page to the the default ones from the css file and trigger JavaScript again?

可能有人指点正确的code吗？

Could someone advice the proper code please?

推荐答案

的免责声明：以下是不完全是一个强大的解决方案，但我发现它有趣，我想我应该分享的

我在过去类似的要求，并且奇怪的是，我最终的解决方案是降级到jQuery来利用<一个href=\"http://www.reddit.com/r/self/comments/a88nf/when_i_click_on_a_link_within_the_comments_and/c0gb5g3\">a臭虫的jQuery 1.3 。

I had a similar requirement in the past, and strangely enough, the solution I ended up with was to downgrade to jQuery to take advantage of a bug in jQuery 1.3.

我只测试了在Firefox的一个版本，所以因人而异，但尝试以下操作：

I only tested this on one version of Firefox, so YMMV, but try the following:

• 使用jQuery 1.3 - 当你点击该链接然后后退按钮回来这个重复动画


• 使用jQuery 1.4 - 这并不

• Using jQuery 1.3 - this repeats the animation when you click the link then come back with the back button
• Using jQuery 1.4 - this doesn't

这是足以让我用例，因为我是针对有限的观众，只发最低限度使用jQuery的。话虽如此，我热切地注视着这个线程找到一个更好的解决方案的希望。

This was sufficient for my use-case since I was targeting a limited audience and only made minimal use of jQuery. That said, I'm eagerly watching this thread in a hope of finding a better solution.

更新

继上述的jQuery错误的踪迹，它看起来像你可以通过禁用 bfcache 获得同样的效果。

Following the trail of the above stated jquery bug, it looks like you can get the same effect by disabling the bfcache.

做的最简单的方法是将<一个href=\"http://stackoverflow.com/questions/3628459/jquery-page-transition-and-browser-history/3695577#3695577\">add一个 onunload的属性身体。 （链路详细信息）。

The simplest way to do would be to add an onunload attribute to body. (more details in link).

<body onunload=''>

下面是一个例子，它使用jQuery 1.6。再次，不彻底的测试，因此
情况因人而异。

Here's an example, which uses jquery 1.6. Again, not thoroughly tested so YMMV.

• 使用jQuery 1.6，与bfcache残疾人

• Using jQuery 1.6, with bfcache disabled

这篇关于浏览器＆QUOT;返回]按键与jQuery的动画页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！