<script type="text/javascript"> var degree = 0; var maxtalk = 0; var talkbubble = 1; $(document).ready(function(){ $("div.bubble-options p.dog-bubble").each(function(){ maxtalk++; }); }); function dogTalk(){ var timer = setTimeout(function() { $temp = "<p>"+$("div.bubble-options p.dog-bubble:nth-child("+talkbubble+")").html()+"</p>"; $("div.dog-bubble").html($temp); //randomize bubbles oldbubble = talkbubble; while (talkbubble == oldbubble) { talkbubble = Math.floor((Math.random()*maxtalk)+1); } //show the bubble $(".dog-bubble").animate({"opacity":'1', "bottom":'30px'}, 400); //hide the bubble setTimeout(function() { $(".dog-bubble").animate({"opacity":'0', "bottom":'0px'}, 400); dogTalk(); }, 5000); }, 2000); } function rotate() { $planet = $("div.planet>img"); //CSS3 $planet.css({ 'transform' : 'rotate(' + degree + 'deg)'}); // For webkit browsers: e.g. Chrome $planet.css({ WebkitTransform : 'rotate(' + degree*2 + 'deg)'}); // For Mozilla browser: e.g. Firefox $planet.css({ '-moz-transform' : 'rotate(' + degree + 'deg)'}); //IE9 $planet.css({ '-ms-transform' : 'rotate(' + degree + 'deg)'}); //Opera $planet.css({ '-o-transform' : 'rotate(' + degree + 'deg)'}); // Animate rotation with a recursive call var timer = setTimeout(function() { degree-=0.1; rotate(); },10); } function dogRun(){ var dog = $("div.dog"); var timer2 = setTimeout(function() { if(dog.css("background-position") == "0px 0px") dog.css({"background-position":"-80px -2px"}); else dog.css({"background-position":"0px 0px"}); dogRun(); }, 130); } $(window).load(function(){ rotate(); dogRun(); dogTalk(); }); </script>