title: How to debug my mouse event handlers
body: <p>so, ive been having a bunch of trouble with the buttons on this page <a href="https://greasygrandpa.github.io/god.net/" rel="nofollow noreferrer">https://greasygrandpa.github.io/god.net/</a> , whenever you mouseoff the buttons before the icon fades in, it wrecks the whole thing, and doesn't apply the mouseleave event handler function, here's the j-query i used for it :</p>
  
  <pre><code>$(document).ready(function(){
    $('.aa').mouseenter(function (){
      $(this).animate({'width':'90%'}, 1000);
      $(this).children('.fa').delay(670).fadeIn();
      $(this).children('.fa').delay(1000).css('margin-right','40%');
    });
    $('.aa').mouseleave(function () {
      $(this).animate({'width':'40%'}, 1000);
      $(this).children('.fa').css('display','none');
      $(this).children('.fa').css('margin-right','0');
    });
    $('.aal').mouseenter(function (){
      $(this).animate({'width':'90%'}, 1000);
      $(this).children('.fa').delay(670).fadeIn();
      $(this).children('.fa').delay(1000).css('margin-left','40%');
    });
    $('.aal').mouseleave(function () {
      $(this).animate({'width':'40%'}, 1000);
      $(this).children('.fa').css('display','none');
      $(this).children('.fa').css('margin-right','0');
    });
  });
  </code></pre>
  
  <p>.aa and .aal are used to specify different div's based on their side of the screen.
  any help is much appreciated, and im sorry if it's something really simple, i'm really new to j-query and couldn't find any solutions anywhere else.</p>