一键触发 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

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

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