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

 });

看看这个小提琴http://jsfiddle.net/wYdZb/3/

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

1 个答案: