заменить кнопку с другой кнопкой

Question

У меня есть 2 button элементов. При щелчке первой кнопки появляется вторая кнопка, а первая исчезает. @Fiddle

$(document).ready(function() { 
    $("#startClock").click(function() { 
     $("#startClock").fadeOut().delay(120000).fadeIn(); 
     $("#submitamt").fadeIn().delay(120000).fadeOut();   
    }); 
}); 

<button class="rightbtn" type="button" id="startClock">Start</button> 
<button class="rightbtn" type="button" id="submitamt" style="display:none;">Submit</button> 

Все это хорошо, но когда вторая кнопка заменяет первый скользит справа налево. Я хочу, чтобы вторая кнопка заменила первую над ней, не сдвигая/не занимая места/не влияя на CSS.

Может ли кто-нибудь сказать, как это сделать?

Answer 1

Попробуйте это, может помочь

вам нужно использовать обратные вызовы

$(document).ready(function() { 
    $("#startClock").click(function() { 
     $("#startClock").fadeOut(function(){ 
      $("#submitamt").fadeIn().delay(120000).fadeOut(function(){ 
        $("#startClock").delay(120000).fadeIn(); 
      }); 
     }) 

    }); 
}); 

или просто

$(document).ready(function() { 
     $("#startClock").click(function() { 
      $("#startClock").fadeOut(function(){ 
       $("#submitamt").fadeIn().delay(120000).fadeOut(function(){ 
         $("#startClock").fadeIn(); 
       }); 
      }) 

     }); 
    }); 

только в этом случае, как только он будет оттянуть на 120000 milisecs.

Updated Fiddle

Answer 2

Заменить в коде JQuery

$(document).ready(function() { 
    $("#startClock").click(function() { 
     $("#startClock").fadeOut().delay(120000,function(){ 
      $("#submitamt").fadeIn().delay(120000); 
    }); 
}); });