Как сделать автомобильные поворотники (мигалки) с помощью jQuery?

У меня есть какое-то странное задание. Я должен внедрить функциональность автомобильных поворотных огней на свою веб-страницу. У меня есть две кнопки (влево и вправо) и две зеленые стрелки (влево и вправо). Должно быть так: я нажимаю левую кнопку (левая стрелка теперь скрыта) и левая стрелка должна мигать. Когда я нажимаю еще раз, он должен остановить анимацию и скрыться. Я просто не знаю, как обрабатывать состояние кнопки и правильно ее использовать. Спасибо.

$("#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
    }
}

javascript html jquery css jquery-effects
person ilyablbnv    schedule 16.04.2016    source источник
comment
Для этого можно использовать замечательный тег <blink> !   -  person adeneo    schedule 17.04.2016
comment
Просто переключите переменную something на true/false.   -  person charlietfl    schedule 17.04.2016
comment
Это позор, это так здорово! Кажется, это должно быть легко сделать -› jsfiddle.net/L0xo2xr2/3   -  person adeneo    schedule 17.04.2016
comment
@adeneo тоже полезно, спасибо   -  person ilyablbnv    schedule 17.04.2016

Ответы (3)


arrow_upward
-2
arrow_downward

Я бы создал класс css для обработки затухания и мигания с помощью анимации css и просто toggleClass при щелчке в Jquery.

person Brent    schedule 16.04.2016
comment
OP нужна помощь с состоянием, а не с переключением класса - person Ason; 17.04.2016
comment
Ваш комментарий можно было бы превратить в реальный ответ с примером кода и некоторыми деталями. - person Andy; 17.04.2016

arrow_upward
1
arrow_downward

Вы должны создать замыкание, чтобы сохранить состояние при разных кликах. Просто создайте замыкание, поместив обработчик кликов внутри самовызывающейся функции и объявите+инициализируйте свои общие переменные внутри него. Увеличьте количество в конце обработчика кликов. Вы можете переключаться между истинным и ложным с помощью оператора модуля «%». 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++;
   });
})();
person Swimburger    schedule 16.04.2016
comment
Извините за испорченный исходный ответ, я нажал табуляцию + пробел, чтобы попытаться отформатировать ответ, и отправил его случайно. - person Swimburger; 17.04.2016

arrow_upward
1
arrow_downward

Вы можете определить счетчик внешней переменной. Например:

$(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/.

person boroboris    schedule 16.04.2016
comment
вы также должны проверить комментарий adeneo. - person boroboris; 17.04.2016