method chaining in mootools using delay for fade effect

Question

Hi,

I want to use method chaining in moo tools 1.2.

My requirements are as below.

When page load complete.

My one div element say "my_div" is set to hidden visibility.

After half second its opacity set to 0.4 Then again after half second its opacity set to 0.7 Then again after half second its opacity set to 1.

So how could i do this with chaining in moo tools 1.2.

And one more this.

I could i pass the parameter when i call delay method. For example

function demo(arg1, arg2)
{
  // Demo code will be here
}

So how could i call this function with delay of one second and also with passing this two arguments?

Answer 1

How about this?

setTimeout
(
    demo    // function to call
    , 500   // change this according to your needs
    , p1    // this goes to arg1
    , p2    // this goes to arg2
);

p.s. I don't know for IE and Safari, but it works on Firefox, Chrome, and Opera.

Answer 2

Have a look at the Chain.Wait extra: http://mootools.net/docs/more/Class/Chain.Wait

You'll need to go to http://mootools.net/more to get a custom MooTools build that includes the wait extensions.

Answer 3

not sure why you need the gaps when you can do something like this (try it and see if it works better):

(function() {
    $("foo").set("tween", {duration: 1500}).setOpacity(0).fade(1);
}).delay(500);

but if you need to do it as per your specs without a tween, then do:

(function() {
    $("foo").setOpacity(.4).setStyle("visibility", "visible");
}).delay(500);

(function() {
    $("foo").setOpacity(.7);
}).delay(1000);

(function(message) {
    $("foo").setOpacity(1).set("html", message);
}).delay(1500, this, "hello");

no need for chaining as you are running the changes at preset times anyway, they don't need to wait on each other. but the chaining class is awesome for animations as suggested, http://mootools.net/docs/more/Class/Chain.Wait

as for params, .delay supports: (ms, bind [this etc], arguments) (as per last cycle example that changes the div's html)