Show text for certain amount of time

Quick and dirty example:

<a href="" class开发者_StackOverflow社区="test">save</a>

$(".test").click(function(e){
    e.preventDefault();
    $(this).html("saved");
 };

I want have a link with save, after you click it, it displays saved for half a second,after that it fades back to the text loaded from within the (has to be stored in a var or something).

If someone could give me a quick example how to get the text(/store/delay) within a anchor i think i'm able myself to animate it with things like fading.

You have to use setTimeout, like this:

<a href="" class="test">save</a>

$(".test").click(function(e){
    e.preventDefault();
    var previousText = $(this).html();
    $(this).html("saved");
    setTimeout(function() { $(this).html(previousText) }, 500);
};

You could do:

$(".test").click(function(e){
    e.preventDefault();
    var that = this;
    var text = $(this).html();
    $(this).html("saved");
    setTimeout(function(){
        //fade back
        $(that).html(text);
    }, 1000);
 });

fiddle here: http://jsfiddle.net/MPCQs/

Try the following

$(document).ready(function() {
  $('.test').click(function(e) {
    var link = this;
    e.preventDefault();
    $(this).html("saved");
    setTimeout(function() { $(link).fadeOut(1000) }, 500);
  });
});

Fiddle: http://jsfiddle.net/vPeT3/

You could store the previous data ($(this).html()), change the text and then use setTimeout to reset the text after a specified amount of time.

Something like this:

$(".test").click(function(e){
    var $a = $(this);
    var txt = $a.html();
    $a.html("saved").fadeOut('slow', function () { $a.html(txt).fadeIn('fast'); });
    return false;
 })

You can specify any value in milliseconds instead of 'slow' or 'fast' in the fade methods.

Demo: http://jsfiddle.net/kSB9M/