하나의 버튼에서 2 개의 이벤트 트리거링

Question

두 개의 이벤트를 모두 '두'버튼에서 끕니다. 그러나 하나의 이벤트가 발생하고 완료된 후 (#earl이 움직이는 것) 다음에 페이드가 작동합니다. 같은 시간에 둘 다 발사 할 수있는 방법이 있습니까?

을 Heres 코드 :

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/