jquery waypoints and cookies

Question

I am currently using jQuery-waypoints on my website to animate / fade-in promos once reached a certain area. Since I have these on several pages it could become quite annoying for my end users and I am wondering if there is a way to combine this with jQuery-cookie in order to animate only once.

My current waypoints code:

     $('.banner1').waypoint(function() {
        $('.banner1').removeClass('hidden');
        $('.banner1').addClass('animated fadeInLeft');
     }, {
         offset: '100%'
     });

Some expert advise would be greatly appreciated, thank you.

Answer 1

When using jQuery-cookie you can use following codes:

$.cookie('cookie_name', 'cookie_value'); // set cookie value

And this one to return a cookies value:

$.cookie('cookie_name'); // get cookie value

Now all you have to do is to check if a special cookie is set, if so: do nothing, if it is not set: do you animations and set this cookie, for example:

$('.banner1').waypoint(function() {
        // check if cookie is undefined or empty
        if ( typeof $.cookie('banner1') === 'undefined' || $.cookie('banner1').length <= 0 ) {
          $.cookie('banner1', 'some-value-here'); // set cookie value
          $('.banner1').removeClass('hidden');
          $('.banner1').addClass('animated fadeInLeft');
        }       
     }, {
         offset: '100%'
     });

EDIT: I'm not sure if this is the best way to check if a cookie is set, but it should work.