Jquery 在一个按钮上触发2个事件

我能够通过一个“两个”按钮触发两个事件，但似乎是一个触发，然后在它完成后（移动#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); 
    });
    });
    });
    });

var jBttn=“Jump”；
var fBttn=“褪色”；
var bBttn=“两者”；
var bttnReturn=函数（）{
$（“#jumpBttn”）。替换为（jBttn）；
$（“#fadeBttn”）。替换为（fBttn）；
$（“#bothBttn”）。替换为（bBttn）；
}
/*淡入淡出按钮*/
$（“#fadeBttn”）.live（'click'，function（）{
$（“按钮”）.attr（“禁用”，真）；
$（“#earl”）.fadeOut（400，function（）{
$（this）.delay（200）.fadeIn（400，function（）{
bttnReturn（）；
});
});      
});
/*跳转按钮*/
$（“#jumpBttn”）.live（'click'，function（）{
$（“按钮”）.attr（“禁用”，真）；
$（“#earl”）.animate（{top:-=100px}，“slow”）；
$（“#earl”）.delay（200）.animate（{top:+=100px}，“bounce”，function（）{
$（“#jumpBttn”）.replaceWith（jBttn）；//在传统IE浏览器中更新的替换按钮。
$（“#fadeBttn”）。替换为（fBttn）；
$（“#bothBttn”）。替换为（bBttn）；
});
});
/*两个按钮*/
$（“#bothBttn”）.live（'click'，function（）{
$（“按钮”）.attr（“禁用”，真）；
$（“#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）；//在传统IE浏览器中更新的替换按钮。
$（“#fadeBttn”）。替换为（fBttn）；
$（“#bothBttn”）。替换为（bBttn）；
});
});
});
});

还有，我相信有更好的方法来安排这一切。这是我的第一个动画脚本之一，不知道如何设置它。此外，这不是基于CSS3的原因是跨浏览器支持。我必须有这个与IE6和以上以及FF2和3兼容。 有兴趣了解如何使这两种效果同时发生！

---

谢谢

将所需元素动画化为

不透明度：0

，然后在该动画的回调中处理其余部分

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

 });

---

看看这把小提琴，明白了。伟大的简化了所有的事情！谢谢你，3nigma！