Animation: Function Inside "Done" Still Executes

Animation: Function Inside "Done" Still Executes

Hello community,

I am having an issue trying to stop a function from executing in the done property when using jquery animate method. Basically the first part of the animation is a color overlay when the user mouses over the element. Once that color overlay completes, then some text is suppose to appear (which is a css text animation itself) . But if the user hovers over the element and quickly mouses out, then the text shouldn't appear but it still is. Here is my code.

  1.         $(".grid1, .grid2, .grid3, .grid4, .grid5, .grid6").on("mouseover", function() {
  2.             var pTag = $(this).find("p.grid-overlay");
  3.             var currentGrid = $(this);
  4.             var currentClass = $(this).attr("class");
  5.             $(pTag).animate({
  6.                 backgroundColor: "#7c58bc",
  7.                 opacity: 0.5
  8.             },
  9.             {
  10.                duration: 200,
  11.                queue: false,
  12.                specialEasing: {
  13.                     width:"linear",
  14.                     height:"easeInOutExpo"
  15.                },
  16.                done: function() {
  17.                     var currentGridTitle = gridText[currentClass].title;
  18.                     var topInc = 0;
  19.                     for (var key in currentGridTitle) {
  20.                         var titleElement = $("<p class=\'grid-block-text\'></p>");
  21.                         $(currentGrid).append(titleElement);
  22.                         $(titleElement).text(currentGridTitle[key]);
  23.                         var animationName = "animated fadeInDown";
  24.                         var animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
  25.                         var pos = (120 + topInc) + "px";
  26.                         $(titleElement).css("top", pos);
  27.                         $(titleElement).addClass(animationName);
  28.                         $("#yourElement").one(animationEnd, function() {
  29.                             $(titleElement).removeClass(animationName);
  30.                         });
  31.                         topInc = 30;
  32.                     }
  33.                }
  34.             });
  35.         });

I've tried using $(pTag).stop().animate({ }) as well as setting the queue property to false. But that doesn't seem to be working. I'm not sure what to do at this point. I appreciate any advice on this. Thanks.