CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3
Thomas
Thomas

Reputation: 1691

Bootstrap 3 - How to fade in text in a stateful button?

I'm using a Bootstrap 3 stateful button like this:

<button id="someButton" class="btn btn-primary" data-loading-text="Loading...">Save</button>

<script>
  $('#someButton').on('click', function () {
    var $btn = $(this).button('loading');
    // business logic...
    $btn.button('reset');
  })
</script>

When I click this button, the text changes for "Loading..." while I'm doing an Ajax call, and changes back to "Save" when it's done. I just would like the text to appear slower than instantly when it changes.

I obviously can do this by changing the text directly from the JavaScript with the jQuery fadeIn() method, but I want to keep the use of HTML attributes like 'data-something-text="Something"' and the Bootstrap JavaScript stateful button thing (http://getbootstrap.com/javascript/#buttons-stateful) because it helps with i18n and keeps the text in the DOM.

Any help appreciated.

Upvotes: 0

Views: 1436

Answers (1)

Ted
Ted

Reputation: 14927

Try it like this: This JS:

$(document).ready(function(){
    $('#someButton').on('click', function () {
        var $this = $(this),
            loadText = $this.attr('data-loading-text'),
            $textEle = $this.find('span');

        $textEle.fadeOut(function(e){
            $textEle.text(loadText).fadeIn();
        })
    })
});

For this HTML:

<button id="someButton" class="btn btn-primary" data-loading-text="Loading...">
   <span>Save</span>
</button>

See this demo bootply

This allows the text to fade in/out without fading the whole button. Also, I set the button to a fixed width in the bootply since by default, the button width is determined by the text length.

(Or if you like Font Awesome and spinning icons, see this bootply)

Upvotes: 2

Related Questions