Descargas, guías, trucos, gameplays...

viernes, 25 de diciembre de 2015

Animaciones consecutivas con jQuery






Código.gs
function doGet() {
  var html = HtmlService.createTemplateFromFile("page").evaluate();
  html.setTitle("BCT FBA");
  return html;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
}



page.html
<?!= include('css'); ?>
<?!= include('js'); ?>

<div class="div">
 <input type="button" id="boton" value="Animar">
 <div id="div1" class="div">3</div>
 <div id="div2" class="div">2</div>
 <div id="div3" class="div">1</div>
</div>



js.html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    $.globalQueue = {
        queue: function(anim) {
            $('body')
            .queue(function(dequeue) {
                anim()
                .queue(function(innerDequeue) {
                    dequeue();
                    innerDequeue();
                });
            });
            
            return this;
        }
    };

    $("#boton").click(function() {
        $.globalQueue
        .queue(function() {
          return $("#div1").fadeOut(1000);
        }).queue(function() {
       return $("#div2").fadeOut(1000);
        }).queue(function() {
       return $("#div3").fadeOut(1000);
        });
    });
    });
</script>



css.html
<style>
.div{
    font-family:Segoe UI;
    font-size:2em;
    color:gray;
    width:100%;
    text-align:center;
}
</style>







No hay comentarios:

Publicar un comentario