Animate Your Page During Confirmation

Problem:
I desired the following feature on my page. When the user clicked a link, do the following:

1. Use scriptaculous animations to "get rid of" the current page (goal is to eliminate other links and form submit buttons and provide visual feedback that a 'process' has started).
2. Display the dialog that was *already* coded into the link's onclick event.
3. If they choose 'ok', give them visual feedback that the action has been submitted and then *continue* to the link destination.
4. If they choose 'cancel', restore the page.

Solution: yourpage.jsp

Event.observe( window, 'load',
  function() {
      //alert('observing window load');

      $$('.processRole').each(

          function(value, index) {
              var old = value.onclick;

              value.onclick = function() {

                  new Effect.SlideUp('pagecontent', {
                      duration: 1.0,
                      queue: 'front'
                  });

                  new Effect.Fade('copyRight', {
                      duration: 1.0,
                      queue: 'end',
                      afterFinish: function(o) {
                          var rv = old.call(value);

                          if (rv) {
                              // alert('you chose ok');

                              new Effect.Appear('waitNotification', {
                                  queue: 'end'
                              });

                              new Effect.Highlight('waitNotification', {
                                  queue: 'end'
                              });
                           
                              new Effect.Appear('copyRight', {
                                  queue: 'end'
                              });                              

                              location.href = value;

                          } else {
                              //alert('you chose cancel');

                              new Effect.SlideDown('pagecontent', {
                                  duration: 1.0,
                                  queue: 'front'
                              });
                            
                              return false; // this return doesn't have any effects currently
                          };

                      }

                  });
                            
                  return false; // always return false
              };

          }
      );      
  }

);

A slight improvement; do not begin the navigation until the last animation is finished:
snippet: yourpage.jsp

                         
new Effect.Appear('copyRight', { 
    queue: 'end',
    afterFinish: function(o) {
     location.href = value;
    }
});

//location.href = value;