Question

我正在使用follwing函数在页面首次加载时启动动画。它工作正常。

function checkAnimation_ss() {
    var $elem = $('.ss');
    // If the animation has already been started
    if ($elem.hasClass('icon_start')) return; //or same session??
    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('icon_start');
    }
}

我的问题是，当我导航到另一个页面然后点击＆＃34;返回＆＃34;浏览器的按钮，动画再次开始。

有没有办法让动画在会话中只运行一次？我知道我需要在某种程度上使用jquery.cookie.js，我只是无法解决这个问题？

非常感谢您的帮助

Answer 1

是的，您可以在jquery.cookie.js中使用cookie，在这种情况下，您可能希望执行类似的操作：

 function checkAnimation_ss() {
var cookieValue = $.cookie("animation");
if(cookieValue == 1)
{}
else
{
    var $elem = $('.ss');
    // If the animation has already been started
    if ($elem.hasClass('icon_start')) return; //or same session??
    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('icon_start');
        $.cookie("animation", 1);
    }
}}

当然，如果您的网站使用它，您也可以使用php解决它。在这种情况下，您可以执行以下操作：

<?php session_start(); $_SESSION['animation'] = 1; ?>

然后：

function checkAnimation_ss() {
<?php 
    if($_SESSION['animation'] == 1)
    {}
    else
    {
?>
    var $elem = $('.ss');
    // If the animation has already been started
    if ($elem.hasClass('icon_start')) return; //or same session??
    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('icon_start');
        $.cookie("animation", 1);
    }
<?php 
}
?>}

Answer 2

最终守则......

function checkAnimation_ss() {

    var cookieValue = $.cookie("animation");
    var $elem = $('.ss');
    if(cookieValue == 1){
        $elem.addClass('icon_visible');
    }else{
      // If the animation has already been started
      if ($elem.hasClass('icon_start')) return;
      if (isElementInViewport($elem)) {
          // Start the animation
          $elem.addClass('icon_start');
          $.cookie("animation", 1);
      }
    }

}

jQuery - 在会话中仅运行一次动画

2 个答案: