Repeating "jQuery Animation" With Cookie On/Off Tutorial

3/26/2013

You don't need complicated large plugins for infinite repeating jQuery animation. You simply need this itty-bitty plugin with cookies to add "jQuery animation" to your website. Infinitely repeats - ON/OFF link - with cookie - user preference honored. Easy Peasy Japanesey!

CSS

body {
overflow-x:hidden;
background:#D5EAF9;
}
#foot {
position:fixed;
bottom:0;
}
#nearclouds, #farclouds, #balloon1, #balloon2, #plane {
position:fixed;
background-repeat:no-repeat;
}
#plane {background:url(/img/plane.png);width:606px;height:81px;left:50%;margin-left:-303px;top:150px;}
#nearclouds {background:url(/img/nearclouds.png);width:1268px;height:180px;bottom:250px;}
#farclouds {background:url(/img/farclouds.png);width:1068px;height:114px;bottom:375px;right:275px;}
#balloon1 {background:url(/img/balloon1.png);width:101px;height:141px;bottom:150px;left:50px;}
#balloon2 {background:url(/img/balloon2.png);width:138px;height:193px;bottom:300px;right:150px;}
/* --- On/Off --- */
#onoff {
cursor:pointer;
}
#onoff span {
font-weight:bold;
color:red;
padding-left:2px;
}
#onoff span.on {
color:green;
}

HTML

<div id="foot">
    <span id="plane"></span>
    <span id="sun"></span>
    <span id="nearclouds"></span>
    <span id="farclouds"></span>
    <span id="balloon1"></span>
    <span id="balloon2"></span>
</div>

jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

jQuery Animation Plugin

// jQuery Animation ON/OFF
$(document).ready(function() {
	function animateMe(el, startStyle, endStyle, duration, repeat){
		timeouts.push(setTimeout(function(){animateMe(el, startStyle, endStyle, duration, repeat);}, repeat));
		el.css(startStyle);
		el.animate(endStyle, duration, 'linear');
  }   
  function animateTwoWay(el, startStyle, endStyle, duration, pause){
		rep = pause*2 + duration*2
		timeouts.push(setTimeout(function(){animateTwoWay(el, startStyle, endStyle, duration, pause);}, rep));
		el.css(startStyle);
		el.animate(endStyle, duration, 'linear').delay(pause);
		el.animate(startStyle, duration, 'linear').delay(pause);
  }
  function startAnimation(){
		animateTwoWay($('#balloon1'),{bottom: 350}, {bottom: 125}, 35000, 7000);
		animateTwoWay($('#balloon2'),{bottom: 450}, {bottom: 200}, 25000, 5000);
		animateMe($('#nearclouds'),{right: w}, {right: -1268}, 100000, 103000);
		animateMe($('#farclouds'),{right: w}, {right: -1068}, 150000, 153000);
		animateMe($('#plane'),{left: w}, {left: -606}, 50000, 53000);
  }
  function stopAnimation(){
		$("body").find('*').stop(true, true);
		console.log(timeouts.length);
		for (var i=0; i<timeouts.length; i++) {
			clearTimeout(timeouts[i]);
		}
		$("#plane, #balloon1, #balloon2, #nearclouds, #farclouds").removeAttr('style');
  }
  $('#onoff').on("click", function() {
  if(toggleState) {
		$.cookie('animationStatus', 'on', { expires: 365, path: '/' });
		$("#onoff span").text("ON").addClass("on");
    startAnimation();
  } else {
		$.cookie('animationStatus', 'off', { expires: 365, path: '/' });
		$("#onoff span").text("OFF").removeClass("on");
    stopAnimation();
  }
  toggleState = !toggleState;
  });
	var t1, t2;
	var timeouts = [];
  var w = $(document).width()
	var animationStatus = $.cookie('animationStatus');
	if (animationStatus == null || animationStatus == "on"){
		var toggleState = false;
		$("#onoff span").text("ON").addClass("on");
		startAnimation();  
	} else{
		var toggleState = true;
	}
});

// jQuery Cookie Plugin v1.3.1 for Animate ON/OFF
(function(e,f,b){var d=/\+/g;function g(j){return j}function h(j){return c(decodeURIComponent(j.replace(d," ")))}function c(j){if(j.indexOf('"')===0){j=j.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\")}return j}function i(j){return a.json?JSON.parse(j):j}var a=e.cookie=function(r,q,w){if(q!==b){w=e.extend({},a.defaults,w);if(q===null){w.expires=-1}if(typeof w.expires==="number"){var s=w.expires,v=w.expires=new Date();v.setDate(v.getDate()+s)}q=a.json?JSON.stringify(q):String(q);return(f.cookie=[encodeURIComponent(r),"=",a.raw?q:encodeURIComponent(q),w.expires?"; expires="+w.expires.toUTCString():"",w.path?"; path="+w.path:"",w.domain?"; domain="+w.domain:"",w.secure?"; secure":""].join(""))}var j=a.raw?g:h;var u=f.cookie.split("; ");var x=r?null:{};for(var p=0,n=u.length;p<n;p++){var o=u[p].split("=");var k=j(o.shift());var m=j(o.join("="));if(r&&r===k){x=i(m);break}if(!r){x[k]=i(m)}}return x};a.defaults={};e.removeCookie=function(k,j){if(e.cookie(k)!==null){e.cookie(k,null,j);return true}return false}})(jQuery,document);

JS Credit

ADVERTISE HERE