Leave softer effect

Question

How I make this effect softer?

$j(window).scroll(function () {
    console.log($j(document).scrollTop());
    if ($j(document).scrollTop() >= 300) {
        $j('.logo img').attr('src', 'http://i.imgur.com/499DSOf.png').addClass('logozinho');
        $j('.header-container').css({"borderTop":"none";})
    } else {
        $j('.logo img').attr('src', 'http://roupasatacado.dev.bizcommerce.com.br/media/wysiwyg/LOGO/loja-logo_1_.png').removeClass('logozinho');
        $j('.header-container').css({"borderTop":"1.5rem solid rgba(67, 67, 67, 0.12)"});
    }
}); 

If it were, for example, a toggle effect, it would only put the "speed" in MS that would be good, but in the case of this code, can you make it softer? Switching from one effect to the other...

Answer 1

Maybe the animate() jquery whatever you’re looking for, it executes a custom animation of CSS properties, follow an example in your context:

$( ".header-container" ).animate({
    borderTop: none
  }, 5000, function() {
    // animação completa.
});

And a snippet also containing a way to smooth the change of attribute src with the method fadeOut() jquery:

$("#go").click(function() {
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
  }, 1500);
});


$("#go2").click(function() {
  $("img").fadeOut('slow', function() {
    $("img").attr('src', 'https://www.stoughtonutilities.com/images/TOD-clock.jpg');
    $("img").fadeIn('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="go">Animar</button>
<div id="block">Olá!</div>

<button id="go2" style="position:absolute;">Suavizar Troca Src</button>
<image id="img" style="margin-top:30px;" src="https://c.tadst.com/gfx/sunrise.png">