如何重置淡入淡出功能

Question

当用户单击按钮时，我想显示几秒钟的文本。目前，当我单击"按钮"时，文本显示并逐渐消失，但是我无法重复操作。

演示：http：//codepen.io/sol_b/pen/glemzr

这是我的代码：

$('#add').click(function() {
  $('#add').hide();
  $('#remove').show();  
  $('#message').html('Added!').delay(3000).fadeOut();
})
$('#remove').click(function() {
  $('#remove').hide();
  $('#add').show();
  $('#message').html('Removed!').delay(3000).fadeOut();
})

有没有办法重置该函数以使其工作不止一次？

Answer 1

您需要在执行fadeOut()

之前调用fadeIn()

$('#message').html('Removed!').fadeIn().delay(3000).fadeOut();

Answer 2

嘿，刚刚看到您的代码笔中的代码，您只需要再次fadein（）才能下次使用它。这是您的答案...

   $（'＃add'）。单击（function（）{      $（'＃add'）。hide（）;      $（'＃remove'）。show（）;      $（'＃message'）。html（'添加！'）。fadein（）;      $（'＃message'）。html（'添加！'）。延迟（3000）.fadeout（）;    }））    $（'＃remove'）。单击（function（）{      $（'＃remove'）。hide（）;      $（'＃add'）。show（）;      $（'＃message'）。html（'添加！'）。fadein（）;      $（'＃message'）.html（'删除！'）。延迟（3000）.fadeout（）;    }））

Answer 3

您可以尝试使用SettiMeT，例如...

setTimeout(function() {
$('#message').html('Removed!').fadeOut();
}, 3000); //3s