在页面重新加载时阻止jQuery动画

时间:2012-07-30 16:41:52

标签: jquery asp.net css session-state

在基本信息显示之前,我已经做了一个可爱的效果,我被缩放并翻译到页面的一角。现在,我意识到用户每次重新加载页面都会被迫看到它。

我想知道自从上次重新启动浏览器后第一次访问时是否只能运行动画,即用户是否来自我自己以外的其他域。

如果这太复杂了,我想运行一次动画,然后以某种方式通知浏览器永远不再运行它。或者至少不在某一天。

由于我不会因为某种不合逻辑但不可避免的原因而使用cookie,我会尝试应用会话状态。所以,我对代码进行了以下更改。

配置:

<sessionState mode="InProc"></sessionState>

JS:

$(document).ready(function () {
var execute = 0; // 0 - no animation, 1 - full length animation
$("div.mainInfo img")
  .delay(400 * execute)
  .fadeIn(1000 * execute);
  ...
}

的Page_Load:

Session["hazaa"] = "shazoo";
if(IsPostBack)
{
  if(Session["hazaa"] == "shazoo";
    DoTheCoolStuffToAffectJQueryOnTheClient(0);
}

所以,如果hazaa确实是shazoo我想改变jQuery执行标志然后......确切地说,我该怎么做?!无论如何,旗帜让我烦恼,因为我每次第二次上传作品时都会忘记打开它,所以它是一个静态零时间。所以,如果为了允许 DoTheCoolStuffToAffectJQueryOnTheClient(0)呼叫工作而去,我就不会哭。

4 个答案:

答案 0 :(得分:3)

您可以使用会话或本地存储来完成您想要完成的任务。

https://developer.mozilla.org/en/DOM/Storage

会话存储将持续到浏览器重新启动并且本地存储持续持续到客户端清除它

使用你所要做的就是在动画上完成存储一个值 即。

sessionStorage.setItem("animeRan", 'yes');

然后在其他页面上的任何位置,只要它们位于同一个域中,您就可以使用

访问它
sessionStorage.getItem("animeRan");

并随时使用

将其删除
sessionStorage.removeItem("animeRan");

这是一个网站,您可以检查浏览器兼容性/支持以及有关网络存储的更多信息

http://caniuse.com/#feat=namevalue-storage

答案 1 :(得分:1)

作为wireyanswer中所说的内容的补充。 如果您不确定它是如何使用的话,这是一个代码示例。

您可以使用sessionStorage,如下所示:

$(document).ready(function () {
  if (sessionStorage.getItem("animationDone") !== null) {
    $("div.mainInfo img")
      .delay(400 * execute)
      .fadeIn(1000 * execute);
      ...
      sessionStorage.setItem("animationDone", "done");
   }
}

这会保存到浏览器sessionStorage,与服务器端无关。

如果您确实需要自行删除sessionStorage.removeItem("animationDone");

当浏览器会话结束时,sessionStorage将过期。例如:关闭浏览器等。

答案 2 :(得分:0)

您可以在第一个动画完成后创建一个cookie。然后你在每个页面加载时读取该cookie,以查看最近是否运行过动画。一个小缺点是,不接受cookie的用户每次都会看到它,但我相信它们很少。

对于jQuery,有plugins可以让您更轻松地管理Cookie。

使用上面的插件,我说你的代码是这样的:

$(function () {
   if (!$.cookie("animationRun")) {
      $("#some-selector").animate(... , function () {
         // Let the cookie expire after one day
         $.cookie("animationRun", true, { expires: 1 });
      });
   }
});

答案 3 :(得分:0)

您应该设置一个cookie并在播放动画之前检查该cookie是否存在。

这里的一个缺点是,不接受您的cookie的用户仍然会看到动画。