当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - 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.

网友答案:

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)

分享给朋友:
您可能感兴趣的文章:
随机阅读: