CODEWITHSUNDEEP
jqueryhtmlbutton
Sheldon
Sheldon

Reputation: 10095

How do I fadeOut the text of the button using jQuery?

I have the following button that I'd like to fadeOut the text. I don't want to fadeout the button, just the text within it. How would I do this?

jQuery So far:

$('#name').click(function(){
    //Fade out text
   });

Markup:

 <button id="name" type="submit" class="btn btn-large">Next >></button>

Upvotes: 0

Views: 105

Answers (3)

Chris Herbert
Chris Herbert

Reputation: 6295

You can use the jQuery Color plugin to animate a color change from the original color to "transparent".

HTML

<button id="submit_button">Next >></button>

CSS

#submit_button {
    color: #000;
}

Javascript

$(document).ready(function(){
    $('#submit_button').click(function(){
        $(this).animate({
            color: 'transparent'    
        },1000);
    });
});

Here's a jsFiddle as an illustration: http://jsfiddle.net/5p2cH/3/

Upvotes: 1

Vic
Vic

Reputation: 8991

It seems like you're using twitter bootstrap. In that case, use <a> instead of <button>

Something like this:

<a href="#" id="name" class="btn btn-large"><span id="fade">Next</span></a>

then you can just fadeout the span:

$("#fade").fadeOut("slow")

jsfiddle: jsfiddle

Upvotes: 2

JohnJohnGa
JohnJohnGa

Reputation: 15685

I would recommend to change the color of the text to the color of your button...

$('#name').click(function(){
   $(this).css('color', 'red');
});

because fade out a text is not possible...

Upvotes: 1

Related Questions