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 に答える
0

CSS のみを使用して、どの JavaScript ソリューションよりもスムーズに動作するものを作成しました。

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

    #highScore

{ 背景: #c30000; }

.animated { -webkit-animation-duration: 5s; -moz-animation-duration: 5s; -o-animation-duration: 5s; アニメーション期間: 5 秒。-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% { 不透明度: .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; アニメーション名: フラッシュ; }

jsFiddle で試してみる

于 2013-06-19T12:44:37.123 に答える
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 に答える