0

jQueryの経験がほとんどないため、このコードの修正に問題があります。

$("#msg-button").click(function() {
    $("#msg_alert").removeClass("msg_stop").addClass("msg_play");
    setTimeout(function() {
        $("#msg_alert").removeClass("msg_play").addClass("msg_stop")
    }, 2000);
});​

実は、「間違ったコード」を使うと、狙っている効果が効くのです。

このスクリプトは、CSS3アニメーションを再起動するための回避策です。ユーザーがidをクリックするたびに、クラスでアニメーションを再生すること#buttonでidが表示されます。アニメーションは2秒間続きます。したがって、スクリプトの次の部分には2秒の遅延があり、基本的にid＃msg_alertがclass.msg_stopに戻ります。#msg_alert.msg_play

jsFiddleから返されるエラーアラートをフォローしようとしましたが、それに応じてコードを変更すると、スクリプトが機能しなくなります。（実際には、最初の2つのエラーを修正した後でjslintを再度実行すると、さらに多くのエラーが発生するため、jsFiddleがコードが無効であると通知するまで修正を続けます。

4

3 に答える 3

0

私はあなたのコードに大きな問題があるとは思いません.フィドルへのリンクが役に立ちます. ただし、いくつかの提案があります。まず、タイマー変数を使用して、マルチクリックの問題を防ぎます。そのような：

var tmrMsgPlay;
$("#msg-button").click(function(e) {
    $("#msg_alert").removeClass("msg_stop").addClass("msg_play");
    if (tmrMsgPlay != undefined) clearTimeout(tmrMsgPlay);
    tmrMsgPlay = setTimeout(function() {
        $("#msg_alert").removeClass("msg_play").addClass("msg_stop");
    }, 2000);
});

2 番目の提案は、msg_alert を既にクラス msg_stop を持つように設定してから、jQuery の toggleClassを使用することです。

//  preset msg_alert to have class 'msg_stop' at start, then use toggleClass
var tmrMsgPlay;
$("#msg-button").click(function(e) {
    if (tmrMsgPlay != undefined) clearTimeout(tmrMsgPlay);
    $("#msg_alert").toggleClass("msg_play msg_stop");
    tmrMsgPlay = setTimeout(function() {
        $("#msg_alert").toggleClass("msg_play msg_stop");
    }, 2000);
});
于 2012-11-12T14:57:56.810 に答える
0

JSHint レポート /*jshint forin:true、noarg:true、noempty:true、eqeqeq:true、bitwise:true、strict:true、undef:true、unused:true、curly:true、browser:true、jquery:true、indent :4、maxerr:50 */

エラー:

4 行目: $("#msg_alert").removeClass("msg_play").addClass("msg_stop") セミコロンがありません。

于 2012-11-12T14:58:22.350 に答える
0

代わりにこれを試してください：

$("#msg-button").click(function() {
    $("#msg_alert").removeClass("msg_stop").addClass("msg_play").delay(2000).removeClass("msg_play").addClass("msg_stop");
});
于 2012-11-12T14:58:46.820 に答える