title: Transition effect not working jquery
body: <p>i'm creating a navbar and i'm changing the font size of a brand when scroll top is greater than 10 as you can see below . i just wanna make brand font size small or bigger smoothly. just like transitions in css3 . is there any efficient way of doing that???</p>
  
  <pre><code> var a = $(".navbar-default").offset().top;
   $(document).on('scroll', function() {
    if ($(this).scrollTop() &gt; 10) {
      $('.navbar-default').addClass("scrolled");
      $('.navbar-brand').css({"font-size":"20px"});
    } else {
      $('.navbar-default').removeClass("scrolled");
      $('.navbar-brand').css({"font-size":"26px"});
    }
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>   &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand-font-size navbar-brand scroll" href="#home"&gt;Shopify&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav text-center" style="position:relative;left:300px;"&gt;
            &lt;li&gt;&lt;a class="scroll" href="#about"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class="scroll" href="#portfolio"&gt;Accessories&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class="scroll" href="#clients"&gt;Men&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class="scroll" href="#team"&gt;Women&lt;/a&gt;&lt;/li&gt; 
            &lt;li&gt;&lt;a class="scroll" href="#blog"&gt;FAQ's&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class="scroll" href="#contact"&gt;Order Now&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right icons"&gt;
            &lt;li class="icon-border"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-search icons-size"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li class="icon-border"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-shopping-cart icons-size"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li class="icon-border"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-align-justify icons-size"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
      &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
    &lt;/nav&gt;
  </code></pre>