Question

我看起来高低不能找到解决方案。我想运行一个由动画组成的函数5秒钟。我尝试了setInterval和setTimeout但无法让它们正常工作。我有一个创建闪烁文本的功能，我希望它只运行一段时间。任何帮助将不胜感激。这是我的代码

小提琴http://jsfiddle.net/kevinPHPkevin/5uUzE/140/

$.fn.blink = function () {
    $(this).animate({
       'opacity': '0.4'
    }, 200, function () {
        $(this).animate({
            'opacity': 1
        }, 200, function () {
            $(this).blink();
        });
    });
};

$('#highScore').blink();

Answer 1

setTimeout和stop(true,false)将解决此问题。

$.fn.blink = function (duration) {
    var $self = $(this);
    setTimeout(function(){
        $self.stop(true,false).show();
    },duration || 10*1000);
    function blink () {
        $self.animate({
           'opacity': '0.4'
        }, 200, function () {
            $self.animate({
                'opacity': 1
            }, 200, function () {
                blink();
            });
        });
    }
    blink();
};
$("#oldschool").blink(30000); // blink for 30 seconds

http://jsfiddle.net/5uUzE/149/

Answer 2

由于您正在创建一个原型函数，我会将调用次数作为参数传递。

$.fn.blink = function (numCall) {
    var numCall = typeof numCall == 'number' ? numCall : 0
    if(numCall == 10) return false;
    $(this).animate({
       'opacity': '0.4'
    }, 200, function () {
        $(this).animate({
            'opacity': 1
        }, 200, function () {
            $(this).blink(++numCall);
        });
    });
};

小提琴：http://jsfiddle.net/5uUzE/145/

正如Kevin B指出的那样，你可以改变这个代码来减去1 tu numCall，这将允许你设置你想让元素闪烁的时间。

检查他的小提琴：http://jsfiddle.net/5uUzE/150

的变化：

var numCall = typeof numCall == 'number' ? numCall : 10 //Default number of time if not set
if(numCall == 0) return false;
//Later
$(this).blink(--numCall);

//The call
$('div').blink(5);//blink 5 times

Answer 3

只需设置一个计数器：

var makeitstop = 0;
$.fn.blink = function () {
    $(this).animate({
        'opacity': '0.4'
    }, 200, function () {
        $(this).animate({
            'opacity': 1
        }, 200, function () {
            makeitstop++;
            if (makeitstop < 5) $(this).blink();
        });
    });
};
$('#highScore').blink();

<强> jsFiddle example

Answer 4

var stop = false;
$.fn.blink = function () {
    if(stop)return false;
    $(this).animate({
        'opacity': '0.4'
    }, 200, function () {
        $(this).animate({
            'opacity': 1
        }, 200, function () {
           $(this).blink();
        });
    });
};

$('#highScore').blink();
setTimeout(function(){
  stop = true;
},5000)  // <-- Blink for 5 seconds

演示---> http://jsfiddle.net/5uUzE/143/

Answer 5

我使用的CSS创建了一个应该比任何JavaScript解决方案运行更顺畅的CSS。

<span id="highScore" class="animated flash">999</span>

    #highScore

{ 背景：＃c30000; }

.animated { -webkit-animation-duration：5s; -moz-animation-duration：5s; -o-animation-duration：5s; 动画持续时间：5s; -webkit-animation-fill-mode：both; -moz-animation-fill-mode：both; -o-animation-fill-mode：both; 动画填充模式：两者; }

@ - webkit-keyframes flash { 0％，40％，80％{ 不透明度：.4; } 20％，60％，100％{ 不透明度：1; } } @ -moz-keyframes flash { 0％，40％，80％{ 不透明度：.4; } 20％，60％，100％{ 不透明度：1; } } @ -o-keyframes flash { 0％，40％，80％{ 不透明度：.4; } 20％，60％，100％{ 不透明度：1; } } @keyframes flash { 0％，40％，80％{ 不透明度：.4; } 20％，60％，100％{ 不透明度：1; } } .flash { -webkit-animation-name：flash; -moz-animation-name：flash; -o-animation-name：flash; 动画名称：flash; }

jsFiddle to try it out

设置jQuery函数的持续时间

5 个答案: