Запуск 2 событий на одну кнопку

Question

Мне удалось заставить два события сработать от одной кнопки «оба», но кажется, что один срабатывает, а затем, после того как все сделано (перемещение #earl), затем затухание работает ... есть ли способзаставить их обоих одновременно стрелять?

Вот код:

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); 
    });
    });
    });
    });

Кроме того, я уверен, что есть лучший способ настроить все это.Это один из моих первых сценариев анимации, и я не уверен, как именно все это настроить.Кроме того, причина, по которой он не в большей степени основан на CSS3, заключается в поддержке нескольких браузеров.Я должен иметь эту совместимость с IE6 и выше, а также FF2 и 3.Интересно услышать, как заставить эти два эффекта происходить одновременно!Спасибо

Answer 1

анимирует намеченный элемент до opacity:0, а затем при обратном вызове этого дескриптора animate остальные

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

 });

смотрят на эту скрипку http://jsfiddle.net/wYdZb/3/