Question

在Ajax请求之后，我执行以下操作。

$('#change_ts').text('Defaults Changed!');

//blinking part
var t = setTimeout($('#change_ts').fadeIn('slow'), 500);
clearTimeout(t);
var t = setTimeout($('#change_ts').fadeOut('slow'), 500);  
clearTimeout(t);
var t = setTimeout($('#change_ts').fadeIn('slow'), 500); 
clearTimeout(t);
var t = setTimeout($('#change_ts').fadeOut('slow'), 500);  
clearTimeout(t);  
var t = setTimeout($('#change_ts').fadeIn('slow'), 500); 
clearTimeout(t);
var t = setTimeout($('#change_ts').fadeOut('slow'), 500);  
clearTimeout(t);  
var t = setTimeout($('#change_ts').fadeIn('slow'), 500); 
clearTimeout(t);
var t = setTimeout($('#change_ts').text('Change Text/Size'), 500); 
clearTimeout(t);

这是我的变换淡入/淡出闪光灯。它运作良好。

然而，当我执行闪烁部分时，第一行无效。如果我删除了闪烁，则更改了跨度的文本。但是，一旦取消对闪光灯的注释，它就不会改变文本了！！

为什么会这样？

感谢大家的帮助

更新

设置超时对我需要做的事情毫无用处。我现在已经删除了它，但是我有以下内容，但是我仍然无法在淡入/淡出之前更改文本？

$('#change_ts').text('Defaults Changed!');

$('#change_ts').fadeIn('slow');
$('#change_ts').fadeOut('slow');
$('#change_ts').fadeIn('slow'); 
$('#change_ts').fadeOut('slow');  
$('#change_ts').fadeIn('slow'); 
$('#change_ts').fadeOut('slow');  
$('#change_ts').fadeIn('slow');

$('#change_ts').text('Change Text/Size');

Answer 1

如何使用jQuery Blink plugin代替。你可以see the demo here：）

Answer 2

您应该将回调函数传递给setTimeout，如下所示：

var t = setTimeout(function() { $('#change_ts').fadeIn('slow') }, 500);

现在，您正在立即调用淡入淡出函数并将返回值发送到setTimeout。您还应该将超时值更改为500,1000,1500等，否则所有淡入/淡出将同时发生。您可以使用循环为您设置值。为什么要立即清除计时器 - 如果你这样做，它们就没有任何效果。

for (var i = 1; i <= 6; i += 2) {
    setTimeout(function() { $('#change_ts').fadeIn('slow') }, 500 * i);
    setTimeout(function() { $('#change_ts').fadeOut('slow') }, 500 * (i + 1));
}

你也可以制作这样的通用闪光灯，它会一直闪烁，直到你清除定时器：

var state = true;
function blink() {
  state = !state;
  if (state)
    $('#change_ts').fadeIn('slow');
  else
    $('#change_ts').fadeOut('slow');
}

var t = setInterval(blink, 500);

这将持续到您致电clearInterval(t)。

更新：第一次text调用无效的原因是因为第二次text调用立即执行，文本被覆盖。请注意，fadeIn和fadeOut会在动画完成之前立即返回，因此第二个text调用会在此之后立即执行。如果你想等到动画完成，你需要将回调附加到最后一个淡入淡出函数，如下所示：

$('#change_ts').fadeIn('slow', function() {
  $('#change_ts').text('Change Text/Size'); 
});

jQuery text（）在setTimeout之前不起作用？

2 个答案: