jquery - JQuery 効果が繰り返されないようにするにはどうすればよいですか?

Question

特定の画像を5秒間遅らせてからスライドインするjquery効果があります。しかし、ユーザーがページをリロードしたときに、画像が効果を繰り返さないようにしたいです。

これが私の現在のコードです：

 $(window).load(function () {

    setTimeout(function () {
        $("#alex").show("slide", {
            direction: "down"
        }, 1000);
    }, 3000);
});

Answer 1

Cookie を使用して、このブラウザーでこのページに既に効果を加えたかどうかを追跡します。次のようにできます。

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 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=/";
}


// only schedule the effect if we haven't already done it
if (!readCookie("effect1")) {
    $(window).load(function () {
        // write a cookie so we don't do this again
        createCookie("effect1", "done");
        setTimeout(function () {
            $("#alex").show("slide", {
                direction: "down"
            }, 1000);
        }, 3000);
    });
} else {
    // just show it normally
    $(document).ready(function() {
        $("#alex").show();
    });
}