Question

在“代码笔CSS警灯条”示例中，代码自动运行序列1。如何停止此操作？

这是示例中的js：

$('#default').on('click', function(){
  $('.light').attr('class', 'light');
  $('button').removeClass('active');
  $(this).addClass('active');
  setTimeout(function() {
   $('#light-1, #light-2, #light-3').attr('class', 'light strobe blue');
  $('#light-4, #light-5, #light-6').attr('class', 'light strobe red delay');
}, 50);

});

$('#alt').on('click', function(){
  $('button').removeClass('active');
  $(this).addClass('active');
  $('.light').attr('class', 'light');
  setTimeout(function() {
    $('#light-1, #light-3, #light-5').attr('class', 'light strobe blue');
  $('#light-2, #light-4, #light-6').attr('class', 'light strobe red delay');
  }, 50);

});

$('#spotlight').on('click',function(){
  if( $('#default.active, #alt.active ,#off.active').length > 0 ){

    if( !$(this).is('.active') ) {
      $(this).addClass('active');
      $('#light-3, #light-4').attr('class', 'light');
      $('#light-3, #light-4').addClass('spotlight');
    } else if ( $(this).is('.active') && $('#default.active').length > 0 ){
      $(this).removeClass('active');
      $('.light').attr('class', 'light');
      setTimeout(function() {
        $('#light-1, #light-2, #light-3').attr('class', 'light strobe blue');
        $('#light-4, #light-5, #light-6').attr('class', 'light strobe red delay');
}, 10);
    } else if ( $(this).is('.active') && $('#alt.active').length > 0 ){
      $(this).removeClass('active');
      $('.light').attr('class', 'light');
      setTimeout(function() {
        $('#light-1, #light-3, #light-5').attr('class', 'light strobe blue');
        $('#light-2, #light-4, #light-6').attr('class', 'light strobe red delay');
  }, 10);
    } else if ( $(this).is('.active') && $('#off.active').length > 0 ){
      $(this).removeClass('active');
      $('.light').attr('class', 'light');
    }

  } else {
    alert('Spotlight is not for use with "Traffic Warnings" because these light sequences are meant to simlulate the view from the rear of the vehicle. :(')
  }
})

$('#off').on('click', function(){
  $('button').removeClass('active');
  $(this).addClass('active');
  $('.light').attr('class', 'light');
})

$('#traffic-default').on('click', function(){
  $('button').removeClass('active');
  $(this).addClass('active');
  $('.light').attr('class', 'light');
  $('#light-1').attr('class', 'light strobe blue');
  $('#light-2, #light-3, #light-4, #light-5').attr('class', 'light warn on');
  $('#light-6').attr('class', 'light strobe red delay');
})

$('#caution').on('click', function(){
  $('button').removeClass('active');
  $(this).addClass('active');
  $('.light').attr('class', 'light caution');
})

$('#warn-left').on('click', function(){
  $('button').removeClass('active');
  $(this).addClass('active');
  $('.light').attr('class', 'light warn left');
})

$('#warn-right').on('click', function(){
  $('button').removeClass('active');
  $(this).addClass('active');
  $('.light').attr('class', 'light warn right');
})

Answer 1

由于jQuery而不是最初的顺序，实际上是由于每个元素上的类。动画取决于类，因此在加载时在HTML中设置的类将播放相应的动画。

例如，最左边的灯（<div id="light-1" class="light strobe blue">...</div>）具有类light strobe blue。如果您删除strobe blue，它将不会在加载时播放动画。

通过从div#light-(1,2,3...etc)类中除去每个light元素中的所有类，可以停止加载时的初始动画。

在此处查看此更新的JSFiddle：https://jsfiddle.net/4jrhbfgx/

如何在CSS Police Light Bar中停止自动执行SEQUENCE 1？

1 个答案: