显示文本一段时间

发布于 2024-12-02 10:42:48 字数 310 浏览 1 评论 0原文

快速而肮脏的示例：

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

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

我想要一个带有保存的链接，单击它后，它会显示已保存半秒，之后它会淡出回从内部加载的文本（必须存储在 var 或其他内容中）。

如果有人能给我一个简单的例子，如何在锚点内获取文本（/存储/延迟），我想我自己可以用淡入淡出之类的东西来制作动画。

原文

Quick and dirty example:

<a href="" class="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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

红焚 2024-12-09 10:42:48

您必须使用 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);
};

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

回复收藏 0 原文

苏辞 2024-12-09 10:42:48

你可以这样做：

$(".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/

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/

回复收藏 0 原文

夏の忆 2024-12-09 10:42:48

尝试以下

$(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/

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/

回复收藏 0 原文

困倦 2024-12-09 10:42:48

您可以存储以前的数据（$(this).html()），更改文本，然后使用 setTimeout 在指定时间后重置文本。

回复收藏 0 原文

酸甜透明夹心 2024-12-09 10:42:48

像这样的事情：

$(".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/

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/

回复收藏 0 原文

~没有更多了~