Leave a softer effect

Navigation
0

How do I make this effect smoother? 

$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 was only because of the "speed" in MS that would look nice, but in case of this code, how can I make it softer? Switching from one effect to another ...

    
asked by anonymous 28.04.2017 / 15:55

1 answer

4

Perhaps animate() of jquery you are looking for, it performs a custom animation of CSS properties, follows a example in your context: 

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

And a snippet also containing a way to smooth the exchange of the src attribute with the fadeOut() method of 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><buttonid="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">
    
28.04.2017 / 16:02
Problem when rotating android mobile screen Problem to attack child and doubt in using this