jQuery Animation Switch On Off

Yeshua

Nuovo Utente
6 Ago 2018
8
0
1
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?
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>
Grazie in anticipo a chi vorrà aiutarmi!
;)
 
Discussioni simili
Autore Titolo Forum Risposte Data
D Jquery - modifica elemenento onlick jQuery 1
E Problema jquery Success jQuery 2
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
E PHP & jQuery PHP 8
P jquery refresh div non funziona Javascript 0
P lanciare script asp (o php) da jquery Javascript 1
T aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY jQuery 0
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
MarcoGrazia Validazione remota tramite plugin (jquery validate) Snippet Javascript 0
M Come selezionare e deselezionare radiobutton con jquery jQuery 1
M Come validare textarea con jquery jQuery 0
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
MarcoGrazia jquery validate() controllo checkbox jQuery 2
D assegnare risultato di una jquery ad una text Javascript 2
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A php metodo post jquery non da mai errore jQuery 4
T problema con select dinamica con jquery Javascript 0
P jquery .load jQuery 10
E Div che scompare con scroll jquery Javascript 0
T script jquery non funziona più dopo il passaggio a MVC jQuery 5
B jQuery - hide & show li items jQuery 13
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
O [Javascript] Conflitto Jquery: forse... Javascript 0
MarcoGrazia jquery validate, necessità di validare almeno un elemento select su due jQuery 1
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
D Jquery, conflitto tra loro risolvibile? jQuery 7
M Filtrare risultati con valori checkbox passati con jquery jQuery 2
Tommy03 Variabile PHP dentro a JQuery PHP 3
L Problema jQuery validation AJAX (PHP 7) PHP 6
G Campo HTML input file con jQuery jQuery 0
P Jquery event nel foreach php jQuery 3
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1
trattorino Mentions Auto Suggesting da jquery a php PHP 2
X Problema con jquery e ajax jQuery 2
G Inserzione script nella pagina html per jquery jQuery 8
MarcoGrazia Validazione forum con jquery.validate jQuery 2
Shyson Smoot scrolling jQuery nella pagina jQuery 0
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
L Scelta form con jquery jQuery 1
F [Javascript] Aprire file tramite jquery Javascript 0
R Aiuto Jquery jQuery 1
G [HTML] Jquery e tooltipster's jQuery 5
I Jquery fadeout-fadein html data jQuery 0
trattorino Estrarre Nome Utente jquery div php PHP 9
L jquery e json controllo valori da determinate chiavi - keys jQuery 0
B PHP e JQUERY per scrivere codice html dinamicamente PHP 2

Discussioni simili