How can one make an animation run only once per session only at the beginning of the session using jQuery?

Goal

During the loading of the site have a div fixed to the top of the browser window named #topbar start off at height: 100% & opacity: 1.0 and .animate() down to height: 2px & opacity: 0.2.

This animation will broadcast upon the loading of any page 开发者_JS百科of the site; it just has to be the first page load of each new session. If a visitor leaves the site and then reloads any page from it 5 minutes later, they will see this same animation take place once again.

How can one accomplish this via jQuery?

cookies the best way as The Scrum Meister pointed.

check is there any foobar cookie if yes than not to do the animaztion, if not then set a cookie for 5 minutes expire or what start the animation

and another code is good: on every page create an ajax function which resets the expiration time

for example

setcookie(date) //this sets your cookies you should implement for yourself
func setagain() {
    setcookie(expanded_date);
    window.setTimeot(setagain,10000);
} 

if(iscookie() == true) {
setagain()
}
else {
animate()
setagain();
}

cookies tutorial: http://www.w3schools.com/JS/js_cookies.asp

According to: http://api.jquery.com/animate/

With that in mind I would use Ajax to set some sort of Session. ie: <?php session_start(); $_SESSION['animate']=true; $_SESSION['animate_time']=time(); ?>

And you can check if the session is set and the time when it was created.

<?php
$time_till_animate = 60*5;//5 minutes
session_start(); 
if(isset($_SESSION['animate']) && isset($_SESSION['animate_time'])){
if((time()-$_SESSION['animate_time']) > $time_till_animate){
     //Animate
}}else{
     //Animate
}

from then on you are set.

PS: I'm sure there are plenty of better ways to do it. (not sure if you use PHP, just ignore if you dont)