Salve,
questa animazione, si avvia e si ferma cliccando su "Animation On/Off.
jQuery Picnic
sarebbe possibile, invece, avviare e fermare l'animazione mediante questo Switch On/Off?
Eventualmente, come dovrei modificare la parte" css" del mio codice?
Grazie in anticipo a chi vorrà aiutarmi!
questa animazione, si avvia e si ferma cliccando su "Animation On/Off.
jQuery Picnic
sarebbe possibile, invece, avviare e fermare l'animazione mediante questo Switch On/Off?
Eventualmente, come dovrei modificare la parte" css" del mio codice?
Codice:
<style type="text/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;
}
@media only screen and (max-device-width: 1050px) {
#onoff, #foot {
display: none;
}
}
</style>
<body>
<p align="center", id="onoff">Animazione<span>OFF</span></p>
<script type="text/javascript">
// 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: 650}, {bottom: 400}, 20000, 2000);
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);
</script>
</body>
