I'm trying to do an animated popup Gmail style, and animate it at the
same time.
The problem i'm having is that when one message is clearing out, and
making the whole status modal go off screen animated, and a new
message appears at the same moment, how do i make the animation stop,
and bring the modal back to it's display position?

I invoke the think by using msg1 = Site.MsgSet
('aaa<br>aaa<br>aaa<br>aaa<br>'); to set a message, and Site.Msgclear
(msg1,'bbb'); to clear it.

Code:
var Site = {
        start: function(){
                Site.initInfoWin();
                Site.SetBody();

                var msg1 = {}
                $('set1').addEvent('click',function(e){
                        new Event(e).stop();
                        msg1 = Site.MsgSet('aaa<br>aaa<br>aaa<br>aaa<br>');
                })
                $('set2').addEvent('click',function(e){
                        new Event(e).stop();
                        Site.Msgclear(msg1,'bbb');
                })


        },
        initInfoWin: function() {
                if (!$('StatusInfoWin')){
                        var iw = new StickyWinFx({className: 'pf' 
,edge:'upperRight',
position:'upperRight', id:'StatusInfoWin',offset: { x:0, y:
0},draggable:false, dragHandleSelector:'.dragHandle',content:
stickyWinHTML('Info:', '', {width: '250px', baseHref: '/admin/
images'})});
                }
                Site.StatusArea = $E('#StatusInfoWin div.body');
                $('StatusInfoWin').setStyle('top','-500px')
        },
        InfoWinFolded: true,
        SetBody: function(){
                Site.InfoWinBody = $E('#StatusInfoWin div.body');
                Site.InfoWinBody.setStyle('border','1px solid silver')
        },
        InfoWinBody: {},
        MsgSet: function(msg){
                var msg = new Element('div').setStyles
({'display':'block','overflow':'hidden'}).setHTML(msg)
                msg.injectInside(Site.InfoWinBody);
                if (Site.InfoWinFolded){
                        Site.MsgMoveIn();
                }
                Site.InfoWinFolded = false;
                return msg;
        },
        MsgOut: function(msg){
                var msg = new Element('div').setHTML(msg)
                msg.injectInside(Site.InfoWinBody);
                Site.MsgMoveIn();

                return msg
        },
        Msgclear: function(div,msg){
                new Fx.Style(div,'height', {duration: 
1000}).addEvent('onComplete',
function() {
                        div.remove();
                        if ($$('#StatusInfoWin div.body div').length == 0){
                                var dl = function(){
                                        Site.MsgMoveOut();
                                        Site.InfoWinFolded = true;
                                }
                                dl.delay(1000);
                        }
                }).start(0)
        },
        MsgMoveIn: function(){
                $('StatusInfoWin').effect('top').start(-280,-30);
        },
        MsgMoveOut: function(){
                $('StatusInfoWin').effect('top').start(-30,-280);
        }

}

Reply via email to