0

これは正常に機能しましたが、サイトにパルスしたいボタンがたくさんあります。現在、IDを使用してこれを行っていますが、より柔軟なものに移動し、クラスを使用してパルスするボタンを選択したいと思います。 。これがJSFiddleです

私が見ている問題は、少なくとも私のブラウザ（MAC上のGoogle Chrome 25.0）では、ボタンが期待どおりにパルスインすることですが、パルスアウトが遅く、次のパルスインがトリガーされるまでに数秒かかります。次の変更のためにさらに長く、それは何かによって行き詰まっているようです。アニメーションスクリプトは次のとおりです。

function pulseIn() {
    $(".pulse").animate({
        backgroundColor: "rgba(144,238,144,0.5)"
    }, 1000, 'swing', function () {
        pulseOut();
    });
}

function pulseOut() {
    $(".pulse").animate({
        backgroundColor: "rgba(0,0,0,0.5)"
    }, 1000, 'swing', function () {
        pulseIn();
    });
}

pulseIn();
4

2 に答える 2

1

コードを更新しました。これは、特定のコントロールをパルスインおよびパルスアウトに渡す必要があります。あなたのコードでは、最初のコントロールのパルス入力が完了すると、実行が完了していなくても、2 番目のコントロールを含むpulseOutすべてを選択して実行しました(説明が少し混乱しますが、要点を理解していただければ幸いです)。.pulsepulseIn

$('.pulse').each(function(){
    pulseIn($(this));
});

function pulseIn(control) {
    control.animate({
        backgroundColor: "rgba(144,238,144,0.5)"
    }, 1000, 'swing', function () {
        pulseOut(control);
    });
}

function pulseOut(control) {
    control.animate({
        backgroundColor: "rgba(0,0,0,0.5)"
    }, 1000, 'swing', function () {
        pulseIn(control);
    });
}
于 2013-03-11T01:06:53.757 に答える
0

jQuery UI を使用せずに使用できる小さなスニペット (jQuery のみ) を作成しました。

function fadeBtn(el, fadeOutSpeed, fadeInSpeed){
    el.fadeOut(fadeOutSpeed, function(){
        jQuery(this).fadeIn(fadeInSpeed, function(){
            fadeBtn(el, fadeOutSpeed, fadeInSpeed);
        });
    });
}

fadeBtn(jQuery('.pulseBtn'), 750, 2500);

jsFiddle: http://jsfiddle.net/f5q6kuse/

于 2014-08-08T15:17:14.490 に答える