Show a message box which slides out, delays for 3 seconds and slides in with Mootools?

I'm creating a error message displaying box which slides out, delays for 3 seconds and then slides in with Mootools. This is what I'm currentl开发者_如何转开发y doing now, how can I correct it to get it work for me?

var slide = new Fx.Slide($("error"));
slide.slideOut('horizontal').chain(function(){
    $("error").set("text", message);
}).chain(function(){
    this.slideIn('horizontal').delay(3000);
}).chain(function(){
    this.slideOut('horizontal');
});

---

You basically have your mootools correct, but are missing a few key items that would make your script function properly. I have pasted a working version below, and then made some comments:

var slide = new Fx.Slide($("error"));
slide.slideOut('horizontal').chain(function () {
    $('error').set('text', message); this.callChain(); //NOTE
}).chain(function () {
    this.slideIn('horizontal');
}).chain(function () {
    this.slideOut.delay(3000, this, 'horizontal'); //NOTE
});

1. Notice the this.callChain() on the 3rd line. Not having this was what was stopping you seeing anything. The Fx class uses the callChain() method internally to start the next step in the sequence, but if your argument to chain() doesn't contain one of Fx's methods, callChain() is not called, so you have to do it manually.
2. Your call to delay was in the wrong place. Delay() delays the execution of the function it is applied to, it does not insert a pause into a chain. Therefore to display the error message for 3sec you need to add delay to the the last function call, because this is the one you want to slow down
3. Your call to delay was incorrect. Delay applies to the function, not the return value of the function, hence Dimitar's suggestion above. Have a look at function in the mootools core documentation for more info
4. By the sounds of it, you do not have firebug installed. This would have let you explore the DOM to find that your code changes the margins and then the text, but nothing happens after that. Firebug is super useful, so install it ASAP
5. My solution (mootools 1.3) is below, and basically relfects what dimitar was suggesting:

    $('error').set('slide', { 
        mode: 'horizontal' 
    }).get('slide').slideOut().chain(function () {
        $('error').set('text', message); this.slideIn();
    }, function () {
        this.slideOut.delay(3000, this);
    });

Hope it helps