Плавное наведение JS

/** 
        Gets the direction you are moving into ( or out of) an element from. 
        0 = top 
        1 = right 
        2 = bottom 
        3 = left 
    */ 
function getDirection($el, coordinates) { 
 
  // the width and height of the current div 
  var w = $el.width(), 
    h = $el.height(), 
 
    // calculate the x and y to get an angle to the center of the div from that x and y. 
    // gets the x value relative to the center of the DIV and "normalize" it 
    x = (coordinates.x - $el.offset().left - (w / 2)) * (w > h ? (h / w) : 1), 
    y = (coordinates.y - $el.offset().top - (h / 2)) * (h > w ? (w / h) : 1), 
 
    // the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123); 
    // first calculate the angle of the point, 
    // add 180 deg to get rid of the negative values 
    // divide by 90 to get the quadrant 
    // add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/ 
    direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; 
 
  return direction; 
 
} 
 
var eventHandler = function() { 
  $(this).click(function(e) { 
    e.preventDefault(); 
  }); 
 
  $(this).mouseenter(function(event) { 
 
    width = $(this).width(); 
    height = $(this).height(); 
    $(this).find('.portfolio-content').css('display', 'block'); 
    $(this).find('.portfolio-content').css('width', width); 
    $(this).find('.portfolio-content').css('height', height); 
    direction = getDirection($(this), { 
      x: event.pageX, 
      y: event.pageY 
    }) 
 
    switch (direction) { 
      case 0: 
        $(this).find('.portfolio-content').animate({ 
          marginTop: "-" + height + "px", 
          marginLeft: "0" 
        }, 0) /* move into position */ 
        $(this).find('.portfolio-content').animate({ 
          marginTop: "0", 
          marginLeft: "0" 
        }, 200) /* show overlay  */ 
        break; 
      case 1: 
        $(this).find('.portfolio-content').animate({ 
          marginTop: "0", 
          marginLeft: width + "px" 
        }, 0) /* move into position */ 
        $(this).find('.portfolio-content').animate({ 
          marginTop: "0", 
          marginLeft: "0" 
        }, 200) /* show overlay  */ 
        break; 
      case 2: 
        $(this).find('.portfolio-content').animate({ 
          marginTop: height + "px", 
          marginLeft: "0" 
        }, 0) /* move into position */ 
        $(this).find('.portfolio-content').animate({ 
          marginTop: "0", 
          marginLeft: "0" 
        }, 200) /* show overlay  */ 
        break; 
      case 3: 
        $(this).find('.portfolio-content').animate({ 
          marginTop: "0", 
          marginLeft: "-" + width + "px" 
        }, 0) /* move into position */ 
        $(this).find('.portfolio-content').animate({ 
          marginTop: "0", 
          marginLeft: "0" 
        }, 200) /* show overlay  */ 
        break; 
    } 
  }); 
 
  $(this).mouseleave(function(event) { 
    width = $(this).width(); 
    height = $(this).height(); 
    $(this).find('.portfolio-content').css('display', 'none'); 
    $(this).find('.portfolio-content').css('height', 0); 
  }); 
} 
 
function updateGridHover() { 
  $('.portfolio-content').animate({ 
    marginTop: "-1000000px", 
    marginLeft: "-1000000px" 
  }, 0) 
 
  $('#grid-container .portfoli').each(eventHandler); 
}

.container-fluid-gallery { 
  max-width: 1800px; 
  padding: 0; 
} 
 
.portfolio { 
  position: relative; 
} 
 
.portfolio-content { 
  position: absolute; 
  color: #fff; 
  padding: 18px; 
  top: 0; 
  left: 0; 
  z-index: 9999; 
  height: 100%; 
  width: 100%; 
  background: none repeat scroll 0px 0px #6170ca; 
} 
 
.portfolio-content_clickable { 
  cursor: pointer; 
}

<section class="portfolio-area"> 
  <div class="container-fluid container-fluid-gallery"> 
    <div class="grid"> 
      <div class="grid-item logo"> 
        <div class="portfolio"> 
          <a href=""><img src="https://i.stack.imgur.com/FzjGG.jpg" alt=""></a> 
          <div class="portfolio-content portfolio-content_clickable"> 
            <h3 class="portfolio-content-h3">Lorem ipsum</h3> 
            <p class="sportfolio-content-p">Lorem ipsum dolor sit amet, consectetur adipiscing</p> 
          </div> 
        </div> 
      </div> 
      <div class="grid-item grid-item__w2 grid-itemlogo"> 
        <div class="portfolio"> 
          <a href=""><img src="https://i.stack.imgur.com/iUfno.jpg" alt=""></a> 
          <div class="portfolio-content portfolio-content_clickable"> 
            <h3 class="portfolio-content-h3">Lorem ipsum</h3> 
            <p class="sportfolio-content-p">Lorem ipsum dolor sit amet, consectetur adipiscing</p> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</section>