一个接一个的启动点击功能

Question

我有不同的功能，例如：

  function showpanel() {     
$( ".top-buttons .col-md-4 a" ).addClass('crop-anim');
$('body').addClass('stepone')

}

 function showcolor() {     
    $( ".top-buttons .col-md-4 a" ).addClass('cropcolor')
  }

  function hidepanel() {     
    $( ".top-buttons .col-md-4 a" ).removeClass('crop-anim')
    // $( ".top-buttons .col-md-4 a" ).addClass('slideup')
    $( ".top-buttons .col-md-4 a img.crop" ).removeClass('hide')
    $( ".top-buttons .col-md-4 a .right-align" ).removeClass('before')
    $( ".top-buttons .col-md-4 a img.title" ).removeClass('before')
    // $( ".top-buttons" ).removeClass('before')
    // $( ".top-buttons" ).css('margin-top','0px')
  }

我想在点击时触发一个特定的功能，效果很好：

  $("#body").click(function() {
showpanel()
 });

以上工作完美。

但是如果我想在函数 showpanel 完成后立即启动函数 hidepanel() 怎么办？？

我怎样才能做到这一点？

对于上述情况，我尝试了以下方法：

  $("#body").click(function() {
showpanel()
hidepanel(2800)
});

喜欢添加 2800 毫秒的延迟但没有成功。 . .

我正在尝试实现的场景 2；

在showpanel函数结束后，hidepanel函数直接触发。然后再次点击body div，会触发showcolor函数。

这怎么可能？任何帮助/指针都会非常棒！！

谢谢！

Answer 1

setTimeout() 肯定是您所追求的。

$("#body").click(function() {
  showpanel();

  setTimeout(function(){
    hidepanel();
  },2800);
});

编辑

要根据“点击序列”触发不同的动作，可以使用switch()

var clickCounter = 0;

$("#body").click(function() {

  // Increment clickCounter
  clickCounter++;

  switch (clickCounter){

    // First click
    case 1:
      showpanel();

      setTimeout(function(){
        hidepanel(2800)
      },2800);

      break;

    // Second click
    case 2:
      FirstOtherAction();

      break;

    // Third click
    case 3:
      secondOtherAction();

      break;

    // All subsequent clicks
    default:
      allOtherAction();

      break;

   }  // End switch

});  // End click handler