Показывать текст в течение определенного времени

Question

Быстрый и грязный пример:

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

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

Мне нужна ссылка с сохранением, после того, как вы щелкнете по ней, она отобразится сохраненной в течение полсекунды, после чего она вернется к тексту, загруженному изнутри (должен быть сохранен в переменной или чем-то еще).

Если бы кто-нибудь мог дать мне быстрый пример того, как получить текст (/ store / delay) внутри якоря, я думаю, что я могу сам оживить его с помощью таких вещей, как исчезновение.

Answer 1

Вы должны использовать setTimeout, вот так:

<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);
};

Answer 2

Вы можете сделать:

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

скрипка здесь: http://jsfiddle.net/MPCQs/

Answer 3

Попробуйте следующее

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

Скрипка: http://jsfiddle.net/vPeT3/

Answer 4

Примерно так:

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

Вы можете указать любое значение в миллисекундах вместо «медленный» или «быстрый» в методах замирания.

Демо: http://jsfiddle.net/kSB9M/

Answer 5

Вы можете сохранить предыдущие данные ($ (this) .html ()), изменить текст, а затем использовать setTimeout для сброса текста через указанное количество времени.