Wrong use of FadeIn() end fadeOut() with CSS transitions

CSS rule "transition: all" affects jQuery fade effects, returning unexpected results

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<div class="container">
  <!--GoTop group-->
  <a href="javascript:;" id="go-top" class="go-top">
    <span class="fa-stack">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-arrow-up fa-stack-1x fa-inverse"></i>
    </span>
  </a>
  <!--dummy content to make page long enough-->
  <div class="page-header">
    <h2>Go Top icon</h2>
  </div>
  <div class="alert alert-info">
    <i class="fa fa-info-circle"></i> Scroll down and look at bottom right, please.<br>
    <a class="btn btn-primary" href="https://codepen.io/ivanhalen/pen/qVaRwz" target="_blank" rel="noopener">Click here</a> to get a working example with Fade FX based on Bootstrap classes only.
  </div>
  <div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus purus eros, aliquet eu turpis sit amet, vestibulum pellentesque libero. Curabitur faucibus massa malesuada condimentum mollis. Nulla quis magna et felis bibendum tincidunt vitae vehicula purus. Mauris mollis vitae tortor in posuere. Nulla quis aliquet erat. Sed elementum aliquet justo nec porttitor. Sed maximus iaculis purus, id pretium sapien venenatis eu. Fusce maximus maximus nunc, et tempus felis molestie a. Fusce porttitor posuere erat vel convallis. Ut hendrerit imperdiet purus, vel convallis neque sagittis vitae. Curabitur a orci vel...

CSS

a {
  transition: all .5s;
}
.go-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: none;
}

JavaScript

var el = $('#go-top');
var minScroll = 300;
        
// show/hide go-top group
$(window).scroll(function() {
  ($(this).scrollTop() >= minScroll) ? el.fadeIn('slow') : el.fadeOut('slow');
});

// go top on click
el.click(function() {
  $('body, html').animate({
    scrollTop : 0 // scroll to top of body
  }, 'slow', 'easeInOutCubic', function(){
    el.blur(); // remove focus when animation ends
  });
});