jQueryで車のターンライト（ウインカー）を行う方法は？

Question

私はいくつかの奇妙な仕事があります。私は自分のウェブページに車のターンライト機能を実装する必要があります。私は2つのボタン（左右）と2つの緑の矢印（左右）を持っています。それは次のようなものでなければなりません：左ボタンをクリックします（左矢印は非表示になります）、左矢印が点滅します。もう一度クリックすると、アニメーションが停止して非表示になります。私はちょうどボタンの状態を処理し、それを適切に使用することを知らない。ありがとう。

$("#arrow-left").click(function blinker() { 
    if(something) { 
     $('#arrow-left-blink').css("visibility", "visible"); 
     $('#arrow-left-blink').fadeOut(500); 
     $('#arrow-left-blink').fadeIn(500); 
     setInterval(blinker, 1000); 
    } else { 
    //hide 
    } 
} 

Answer 1

私は、cssアニメーションでフェードと点滅を処理し、JqueryのクリックでtoggleClassだけを処理するCSSクラスを作成します。

Answer 2

さまざまなクリックで状態を保存するには、クロージャを作成する必要があります。クリックハンドラをself-invoking関数の中に置いてクロージャを作成し、その内部に共有変数を宣言+するだけです。クリックハンドラの最後でカウントを増やしてください。モジュラス演算子 '％'で真と偽の間を切り替えることができます。 0%2==0、1%2==1、2%2==0、3%2==1、4%2==0、...

(function(){ 
    var counter = 0; 
    $("#arrow-left").click(function blinker() { 
     if(counter%2) {// modulus operator will toggle between 0 and 1 which corresponds to truthy or falsy 
     $('#arrow-left-blink').css("visibility", "visible"); 
     $('#arrow-left-blink').fadeOut(500); 
     $('#arrow-left-blink').fadeIn(500); 
     setInterval(blinker, 1000); 
     } else { 
     //hide 
     } 
     counter++; 
    }); 
})(); 

Answer 3

あなたが外で変数カウンタを定義することができます。 例えば：ここで

$(document).ready(function() { 


    var counter = 0; 
    var blinking; 

    function blinker() { 
    $('#arrow-left-blink').fadeOut(500); 
    $('#arrow-left-blink').fadeIn(500); 
    blinker(); 
    } 

    $("#arrow-left").click(function() { 
    counter++; 
    if (counter % 2 == 1) { 
     $('#arrow-left-blink').css("visibility", "visible"); 
     blinking = setTimeout(function() { 
     blinker(); 
     }, 1000); 
    } else { 
     clearInterval(blinking); 
     $('#arrow-left-blink').css("visibility", "hidden"); 
    } 
    }); 
}); 

はJSFiddleリンクです：https://jsfiddle.net/o2xb8Lod/。