replace button with other button

Question

I have 2 button elements. On the click of the first button, the second button appears and first one disappears. @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>

Everything is fine but when the second button replaces the first one it slides from right to left. I want that the second button should replace the first one directly over it, without sliding/taking any space/without affecting CSS

Can anyone tell how to do so?

Despite this is a css matter (should be solved with css, not mandatory though), you can easily trick that out adding an additional delay, like this: jsfiddle.net/L5kto35b/4 .. Or you can just concatenate the callbacks, but it might be harder to read. — briosheje
– briosheje, Commented Jun 15, 2015 at 8:53

Tuhin · Accepted Answer · 2015-06-15 09:08:30Z

3

Try this, Might help

you need to use callbacks

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

    });
});

or simply

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

        });
    });

in this case only once it will delay for 120000 milisecs.

Updated Fiddle

edited Jun 15, 2015 at 9:08

answered Jun 15, 2015 at 8:52

Tuhin

3,3932 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pbd · Accepted Answer · 2015-06-15 08:55:44Z

0

Replace in your jQuery code

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

answered Jun 15, 2015 at 8:55

Pbd

1,3391 gold badge15 silver badges37 bronze badges

Collectives™ on Stack Overflow

replace button with other button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related