css - JQuery - Save html from elements and restore it -

css - JQuery - Save html from elements and restore it -

i'm trying replace text of button, while maintaining size. seems work fine, unfortunately when restoring original text seems occupy more space.

html

<form id='form-1'> <div class="bttn wt"> <i class="fa fa-at"></i> <label>request lost password</label> </div> </form>

css

.bttn { display: inline-block; padding: 0px 15px; height: 35px; line-height: 35px; font-size: 14px; font-weight: 700; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); cursor: pointer; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; background: orange; text-align: center; }

jq

$('.bttn').on('click', function() { var bt = $('#form-1').find('.wt'); var bt_wd = $(bt).width(); var bt_ori = $(bt).html().trim(); var bt_wait = $(bt).html('waiting..').width(bt_wd); settimeout(function() { $(bt).width(bt_wd).html(bt_ori); }, 3000); });

fiddle

what causes problem? how can solve? thanks

it seems work if utilize $(bt).css('width', 'auto').html(bt_ori);.

jquery css