Question

我正在编写一个文本闪烁的代码，并注意到下面的代码有时会根据时间使文本在停止动画后保持隐藏：

//Blink settings
var blink = {
    obj: $(".blink"),
    timeout: 15000,
    speed: 1000
};

//Start function
blink.fn = setInterval(function () {
    blink.obj.fadeToggle(blink.speed);
}, blink.speed + 100);
//End blink animation, after 'blink.timeout' millisecons
setTimeout(function () {
    clearInterval(blink.fn);
    blink = null;
}, blink.timeout);

fiddle

我尝试在blink.obj.show()之后添加blink.obj.css(...)，clearInterval(blink.fn);等，但it did not work。

...
setTimeout(function () {
    clearInterval(blink.fn);
    blink.obj.show();
    blink.obj.css("visibility","visible");
...

我希望文字在闪烁停止后始终可见

Answer 1

眨眼完成后尝试blink.obj.fadeIn() ..

如果你想保持速度，那么blink.obj.fadeIn(blink.speed)：

...code...code...
//End blink animation, after 'blink.timeout' millisecons
setTimeout(function () {
    clearInterval(blink.fn);
    //The solution to your problem is in the line below
    blink.obj.fadeIn(blink.speed);
    blink = null;
}, blink.timeout);
...

以下是更新的jsfiddle：http://jsfiddle.net/jormaechea/mksh4eu3/7/

Answer 2

您的代码很好，只需删除您添加的+100即可。尝试使用删除100，因为它是100的倍数，15000小于它到达那里时的数量

//Blink settings
var blink = {
  obj: $(".blink"),
  timeout: 15000,
  speed: 1000
};

//Start function
blink.fn = setInterval(function () {
  blink.obj.fadeToggle(blink.speed);
}, blink.speed+100);
//End blink animation, after 'blink.timeout' millisecons
setTimeout(function () {
  clearInterval(blink.fn);
  blink.obj.fadeIn(blink.speed+1);
  blink = null;
}, blink.timeout);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blink">Flashing Text</div>

编辑2：那么你必须通过在停止函数blink.obj.fadeToggle(blink.speed);上添加至少一毫秒来增加blink.obj.fadeIn(blink.speed+1);的数量

jQuery：结束闪烁后，我的闪烁文字不可见

2 个答案: