Olá, eu estou brincando em CSS, HTML e JS para construir um site aleatório. Em tese o site estava todo certo, mas agora que upei o site e fui abrir no meu celular e a animação da volta dos botões do menu estão meio bugadas. As vezes tu clica nos botões (principalmente no da carta) e eles não retraem de volta, ai é preciso clicar novamente ou então clicar no menu pra forçar os botões a voltar.

Em geral é o botão `test4` que *mais* buga.

Obs.: Estou usando o fonts awesome para os icones.

[**o meu Site é esse aqui**][1]

**HTML:**

        <div class="parent2 slideDown noselect">
            <a href="#home"><div class="test1"><i class="fa fa-home fa-2x"></i></div></a>
            <a href="#andrey"><div class="test2"><i class="fa fa-user fa-2x"></i></div></a>
            <a href="#mosufe"><div class="test3"><i class="fa fa-gamepad fa-2x"></i></div></a>
            <a href="#contato"><div class="test4"><i class="fa fa-envelope-o fa-2x"></i></div></a>
            <div class="mask2"><i class="fa fa-home fa-3x"></i></div>
        </div>

**CSS:**

    .parent2 {
      top:15px;
      left:15px;
      position:fixed;
      display:block;
      width:100px;
      height:100px;
      background-color:transparent;
      border-radius:50%;
      z-index:20;
      -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    }
    .test1 {
      width:60%;
      height:60%;
      border-radius:50%;
      position:absolute;
      color:white;
      text-align:center;
      line-height:70px;
        top:25%;
      left:25%;
      z-index:19;
      transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
        position:absolute;
    }
    .test2 {
      width:60%;
      height:60%;
      border-radius:50%;
      position:absolute;
      color:white;
      text-align:center;
      line-height:70px;
        top:25%;
      left:25%;
      z-index:19;
      transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .2s;
    }
    .test3 {
      width:60%;
      height:60%;
      border-radius:50%;
      position:absolute;
      color:white;
      text-align:center;
      line-height:70px;
        top:25%;
      left:25%;
      transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .4s;  
    }
    .test4 {
      width:60%;
      height:60%;
      border-radius:50%;
      position:absolute;
      color:white;
      text-align:center;
      line-height:70px;
      top:25%;
      left:25%;
      transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .6s;  
    }
    .test1, .test2, .test3, .test4{
      background-color: #cc4444;
      -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
    }
    .mask2 {
      top:15px;
      left:15px;
      width:100px;
      height:100px;
      background:#66aadd;
      border-radius:50%;
      position:absolute;
      z-index:21;
      color:white;
      text-align:center;
      line-height:120px;
      cursor:pointer;
      position:fixed;
    }


**JS:**

    $(document).ready(function() {
        /*configuração do menu*/
      var active1 = false;
      var active2 = false;
      var active3 = false;
      var active4 = false;
    
      /*var evento = 'ontouchstart' in window ? 'touchstart' : 'click';*/
      $('.parent2').on('click', function() {
        if (!active1) $(this).find('.test1').css({'transform': 'translate(0px,125px)'});
        else $(this).find('.test1').css({'transform': 'none'}); 
         if (!active2) $(this).find('.test2').css({'transform': 'translate(60px,105px)'});
        else $(this).find('.test2').css({'transform': 'none'});
          if (!active3) $(this).find('.test3').css({'transform': 'translate(105px,60px)'});
        else $(this).find('.test3').css({'transform': 'none'});
          if (!active4) $(this).find('.test4').css({'transform': 'translate(125px,0px)'});
        else $(this).find('.test4').css({'transform': 'none'});
        active1 = !active1;
        active2 = !active2;
        active3 = !active3;
        active4 = !active4;
        });
         /*Configuração da velocidade em que a tela se mexe*/
        $(".slideDown a").click(function(event){        
            event.preventDefault();
            $('html,body').animate({scrollTop:$(this.hash).offset().top}, 800);
         });
    });

O exemplo do menu eu tirei [desse site no CODEPEN][2]

E a [versão demo desse menu é essa][3] 


  [1]: http://www.andreyhartung.qlix.com.br/
  [2]: http://codepen.io/chriskirsch/pen/XJVEag/
  [3]: http://codepen.io/chriskirsch/full/XJVEag/