转换效果不起作用jquery

Transition effect not working jquery

本文关键字：jquery 不起作用转换更新时间：2023-09-26

我正在创建一个导航栏，当滚动顶部大于10时，我正在更改品牌的字体大小，如下所示。我只是想让品牌字体大小变小或变大。就像css3中的转换一样。有什么有效的方法可以做到这一点吗？？？

 var a = $(".navbar-default").offset().top;
 $(document).on('scroll', function() {
  if ($(this).scrollTop() > 10) {
    $('.navbar-default').addClass("scrolled");
    $('.navbar-brand').css({"font-size":"20px"});
  } else {
    $('.navbar-default').removeClass("scrolled");
    $('.navbar-brand').css({"font-size":"26px"});
  }
});

HTML

   <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand-font-size navbar-brand scroll" href="#home">Shopify</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav text-center" style="position:relative;left:300px;">
          <li><a class="scroll" href="#about">Home</a></li>
          <li><a class="scroll" href="#portfolio">Accessories</a></li>
          <li><a class="scroll" href="#clients">Men</a></li>
          <li><a class="scroll" href="#team">Women</a></li> 
          <li><a class="scroll" href="#blog">FAQ's</a></li>
          <li><a class="scroll" href="#contact">Order Now</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right icons">
          <li class="icon-border"><a href="#"><i class="fa fa-search icons-size"></i></a></li>
          <li class="icon-border"><a href="#"><i class="fa fa-shopping-cart icons-size"></i></a></li>
          <li class="icon-border"><a href="#"><i class="fa fa-align-justify icons-size"></i></a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

你不需要像CSS那样动画，你可以使用CSS:

.navbar-brand{
    -webkit-transition: font-size 0.3s ease;
    -moz-transition: font-size 0.3s ease;
    -ms-transition: font-size 0.3s ease;
    -o-transition: font-size 0.3s ease;
    transition: font-size 0.3s ease;
}

我会做两件事，按重要性排序：

首先使用debounce函数来减少调用更新函数的频率，请参阅Ben Alman的函数http://benalman.com/code/projects/jquery-throttle-debounce/docs/files/jquery-ba-throttle-debounce-js.html
进一步的优化是只更新css。如果您正在更改状态，请存储以前的$(this).scrollTop() > 10比较值。如果它没有改变，就什么都不做

这些以及使用css转换使动画更平滑（如另一个答案中所建议的）将使最终结果更漂亮。

您可以使用CSS来缩小字体大小。试试这个：

$(window).scroll(function() {
  if ($(document).scrollTop() > 10) {
    $('nav').addClass('small');
  } else {
    $('nav').removeClass('small');
  }
});

nav {
  position: fixed;
}
button {
  font-size: 40px;
  transition: font-size 1s;
}
nav.small button {
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <button>Home</button>
  <button>About</button>
  <button>Products</button>
  <button>Contact</button>
</nav>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>