2

我看了高和低，找不到解决方案。我想运行一个由动画组成的函数 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();
4

5 回答 5

5

asetTimeout并将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/

于 2013-06-18T20:04:28.893 回答
1

由于您正在创建原型函数，因此我建议将调用次数作为参数传递。

$.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
于 2013-06-18T20:05:15.250 回答
0

只需设置一个计数器：

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 示例

于 2013-06-18T20:02:15.117 回答
0 
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/

于 2013-06-18T20:03:52.047 回答
0

我只使用 CSS 创建了一个，它应该比任何 JavaScript 解决方案都更流畅。

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

    #highScore

{背景：#c30000；}

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

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

jsFiddle 试试看

于 2013-06-19T12:44:37.123 回答