Задать задержку в цепи mootools - PullRequest
Новая
       26

Задать задержку в цепи mootools

1 голос
/ 11 февраля 2012

Я пытался установить цепочку mootools, чтобы применить ее на сайте.Итак, я сделал это, но, все же ... мне нужно установить задержку в начале последовательности, я имею в виду, подождать 5 секунд, прежде чем все начнется, я попытался установить .delay (5000), но простоне получается, пожалуйста.спасибо, вот полный код: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Probando chain de mootools</title>
    <script src="mootools.js" type="text/javascript"></script>

<script>


var ClaseChainEfecto = new Class({
    //implemento chain
    Implements: Chain,

    initialize: function(){
        this.efecto1 = new Fx.Tween('elem1', {
            property: 'opacity',
            duration: 1000,
            onComplete: function(){
                this.callChain();
            }.bind(this)
        });
        this.efecto2 = new Fx.Tween('elem2', {
            property: 'opacity',
            duration: 1000
        });
    },

    efectos: function(){
        this.chain(
            function(){ this.efecto1.start(1,0); },
            function(){ this.efecto2.start(0,1); }
        );
        this.callChain();
    }
});

window.addEvent("domready", function(){
    miClaseChainEfecto = new ClaseChainEfecto();
    miClaseChainEfecto.efectos();
});
</script>
<style type="text/css">
.miestilo1{
    float: left;
    width: 80px;
    background-color: 333399;
    color: #fff;
    padding: 15px;
    font-size: 14pt;
    margin: 15px;
    float:left;
    position:absolute;
}
.miestilo2{
    float: left;
    width: 80px;
    background-color: 333399;
    color: #fff;
    padding: 15px;
    font-size: 14pt;
    margin: 15px;
    visibility:hidden;
    opacity:0;
    float:left;
    position:absolute;
}
</style>
</head>

<body>
<div id="elem1" class="miestilo1">
HOLA!! estoy probando chain. Pongo esta capa con más texto para que se vea!!
</div>
<div id="elem2" class="miestilo2">
Esto es un segundo elemento. Que también tendrá su efecto!
</div>

</body>
</html>
...