动画运行一次登录- jQuery - Animation Run Once On Login - jQuery

Animation Run Once On Login - jQuery

本文关键字：一次登录 jQuery 运行动画 | 更新日期: 2023-09-27

我试图创建一个界面，如果用户去仪表板他们提示登录屏幕，一旦登录他们被带到那里的个人资料页面。我有一个动画，触发一个欢迎框弹出在右上角使用jquery。

我的理论是，他们只能采取的配置文件，如果登录，在PHP中我有它，除非会话正在运行的欢迎框不会显示，所以一旦登录和会话正在运行，并有重定向到profile. PHP和文档准备使用animation. css欢迎框反弹，然后一个if语句说，嘿，如果有类inview不运行动画。但是如果我使用

    .removeClass("animated bounceInDown")

所以动画不能在刷新或页面加载时再次运行，或者如果他们转到另一个页面，如博客等，它会在动画发生之前删除它，然后没有必要延迟它，因为动画会运行。我似乎不能想出一个方法来写这个，我不知道深度jquery或ajax

    $(document).ready( function () {
        $(".user").addClass("inview animated bounceInDown");
        callmeman();
    });
    function callmeman(){
        if ($('.user').hasClass('inview')) {
            // dont run animation again
        }else {
            // do nothing
        }
     }

我很抱歉，如果我没有很好地解释这个，因为这是我在这里的第一个帖子。提前感谢!

我相信你必须使用cookie。如果你是php session，你在服务器端设置cookie。在前面，您在javascript中检查cookie并在需要时删除类。

你也可以不显示/回显框如果会话…

EDIT:完整答案根据维基百科的说法:"cookie是从网站发送的一小段数据，当用户浏览该网站时存储在用户的网络浏览器中。每次用户加载网站时，浏览器都会将cookie发送回服务器，以通知网站用户以前的活动。"所以步骤是

用户登录您的网站:设置cookie(我将此cookie命名为"JustLogged")
用户登录后重定向:播放一次欢迎内容，取消设置JustLogged

js中管理cookie的代码示例(函数从这里取):

function createCookie(name,value,days) {
if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {
    createCookie(name,"",-1);
}

在php (doc) 中管理cookie的代码示例

// create a cookie that will be deleted on browser closed
setcookie("JustLogged", 1);

那么如果我们取前面的列表:

登录时创建cookie:
setcookie (" JustLogged ", 1);
在js中读取cookie，例如在主页上，并在动画完成时删除它

//JS

var justLoggedCookie = readCookie('JustLogged');
if(justLoggedCookie) {
    // play welcome animation
    $( "#welcomeBox" ).animate({
        opacity: 1,
        left: "+=50"
    }, 1000, function() {
        // Animation complete: delete cookie
        eraseCookie("JustLogged");
    });
}

就是这样，动画将运行一次，然后cookie将被删除，因此justLoggedCookie将为空，因此动画将不会再次运行。