如何用 jQuery 做汽车转向灯（信号灯）？

Question

我有一些奇怪的任务要做。我必须在我的网页中实现汽车转向灯功能。我有两个按钮（左和右）和两个绿色箭头（左和右）。应该是：我单击左键（左箭头现在隐藏），左箭头应该闪烁。当我再次点击时，它应该停止动画并被隐藏。我只是不知道如何处理按钮状态并正确使用它。谢谢

$("#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 class 来处理 css 动画的褪色和闪烁，并在 Jquery.

中单击时切换类

Answer 2

您应该创建一个闭包来保存不同点击的状态。通过将点击处理程序放入自调用函数中并在其中声明+初始化您的共享变量来简单地创建一个闭包。在点击处理程序结束时增加计数。您可以使用模数运算符“%”在 true 和 false 之间切换。 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 link：https://jsfiddle.net/o2xb8Lod/。

如何用 jQuery 做汽车转向灯（信号灯）？

How to do car turn lights (blinkers) with jQuery?

html

javascript

css

jquery

jquery-effects