Question

I was able to get the two events to fire off the one ‘both’ button, but it seems one fires and then after it’s done (the moving of #earl) then the fade works… is there a way to get them both to fire at the same time?

Heres the code:

var jBttn = "<button type='submit' id='jumpBttn' class='working'>Jump</button>";
var fBttn = "<button type='submit' id='fadeBttn' class='working'>Fade</button>";
var bBttn = "<button type='submit' id='bothBttn' class='working'>Both</button>";
var bttnReturn = function() {
        $("#jumpBttn").replaceWith(jBttn);
        $("#fadeBttn").replaceWith(fBttn); 
        $("#bothBttn").replaceWith(bBttn);
}


  /*   FADE BUTTON   */
$("#fadeBttn").live('click', function() {
    $("button").attr("disabled", true);
    $("#earl").fadeOut(400, function() { 
    $(this).delay(200).fadeIn(400, function() {
              bttnReturn();
        });
    });      
});

  /*   JUMP BUTTON   */
$("#jumpBttn").live('click', function() {
    $("button").attr("disabled", true);
    $("#earl").animate({top: "-=100px"}, "slow");
    $("#earl").delay(200).animate({top: "+=100px"}, "bounce", function() {
        $("#jumpBttn").replaceWith(jBttn); // replace button to renew in legacy IE browsers. 
    $("#fadeBttn").replaceWith(fBttn);  
    $("#bothBttn").replaceWith(bBttn); 
});
});


  /*   BOTH BUTTON   */
$("#bothBttn").live('click', function() {
    $("button").attr("disabled", true);
    $("#earl").animate({top: "-=100px"}, "slow");
    $("#earl").fadeOut(400, function() { 
        $(this).delay(200).fadeIn(400, function() {
    $("#earl").delay(200).animate({top: "+=100px"}, "bounce", function() {
        $("#jumpBttn").replaceWith(jBttn); // replace button to renew in legacy IE     browsers. 
        $("#fadeBttn").replaceWith(fBttn);  
        $("#bothBttn").replaceWith(bBttn); 
    });
    });
    });
    });

Also, I’m sure theres a better way to set all this up. This is one of my first animation scripts and not sure of exactly how to set it all up. Also, the reason this isn’t more CSS3 based is cross browser support. I have to have this compatible with IE6 and up as well as FF2&3.
Interested to hear how to get the two effects to happen simultaneously!
Thanks

Answer 1

animate the intended element to opacity:0 and then in the call back of that animate handle the rest

 $("#earl").animate({opacity:0,top: "-=100px"}, "slow",function(){
 //rest of the code here
  
 });