在一個按鈕上觸發2個事件

Question

我能夠讓兩個事件觸發一個'both'按鈕，但它看起來是一個火焰，然後它完成後（移動#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，然後在回調是動畫的處理剩下的

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

}); 

看看這個小提琴http://jsfiddle.net/wYdZb/3/