延迟addClass jQuery

时间：2017-03-27 12:08:22

标签： javascript jquery html css css3

我在滚动条上创建了一个粘性导航，其上方的标题缩小了。现在，当导航变得粘稠时，我试图让徽标从左边进入。它有效，但它过早出现。如果您查看我的演示，您可以看到它超出了我不想要的标题。有什么方法可以延迟它进入，直到导航被固定到顶部？

演示：https://codepen.io/Reece_Dev/pen/xqaEZX

＆＃13;
＆＃13; 
$(document).on("scroll", function() {
  if ($(document).scrollTop() > 20) {
    $("header").addClass("shrink");
    //setTimeout(function(){
    $(".logo_animated").addClass("logo_display");
    //}, 900);
  } else {
    $("header").removeClass("shrink");
    $(".logo_animated").removeClass("logo_display");
  }

});
＆＃13; 
* {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
}

#head-background {
  width: 100%;
  background-color: #111;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

header {
  width: 1200px;
  height: 100px;
  margin: 1em auto;
  text-align: center;
  overflow: hidden;
  transition: all 0.8s ease-in-out;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
}

.image {
  display: inline-block;
  margin: 0 auto;
  max-width: 322px;
  max-height: 100%;
  padding-top: 5px;
}

.address-info {
  float: left;
  color: #fff;
  width: 250px;
  text-align: left;
  font-size: 1rem;
  padding-top: 5px;
  padding-left: 1%;
  background-color: aqua;
}

.head-icons {
  float: right;
  list-style-type: none;
  display: block;
  width: 250px;
  text-align: right;
  background-color: aqua;
}

.head-icons li {
  display: inline-block;
  padding-right: 3%;
}

.head-icons li a {
  color: #fff;
  font-size: 2.5rem;
}

.head-icons li:nth-child(4) {
  display: block;
  margin-top: 0.5rem;
  color: #fff;
  font-size: 1rem;
}

.shrink {
  height: 0;
  margin-top: 0;
  margin-bottom: 0;
}

nav {
  display: block;
  width: 100%;
  background-color: #777;
  font-size: 0;
}

nav ul {
  overflow: hidden;
  color: #fff;
  text-align: center;
  -webkit-transition: max-height 0.4s;
  -ms-transition: max-height 0.4s;
  -moz-transition: max-height 0.4s;
  -o-transition: max-height 0.4s;
  transition: max-height 0.4s;
}

nav ul li {
  display: inline-block;
  padding: 1rem 2rem;
}

nav ul li a {
  color: inherit;
  text-decoration: none;
  font-size: 1.5rem;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.burger-button {
  width: 100%;
  text-align: right;
  box-sizing: border-box;
  padding: 0.5rem;
  cursor: pointer;
  color: #fff;
  font-size: 1.5rem;
  display: none;
}

.logo_animated {
  position: absolute;
  top: 1rem;
  margin-left: -20rem;
  width: 200px;
  display: inline-block;
  transition: margin-left 0.5s cubic-bezier(0.5, 0, 0.5, 1.6);
}

.logo_display {
  margin-left: 1rem;
}

#body {
  height: 2000px;
}
＆＃13; 
<div id="head-background">
  <header>
    <h4 class="address-info">00 The Street<br>Bramhope<br>Leeds<br>LS00 000</h4>
    <img class="image" src="images/PopsiesLogoWhite.png">
    <ul class="head-icons">
      <li><a href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
      <li><a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
      <li><a href="mailto:popsiesfishandchips@yahoo.co.uk"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
      <li>0113 1234567</li>
    </ul>
  </header>

  <nav>
    <img class="logo_animated" src="images/popsies.svg">
    <div class="burger-button">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </div>
    <ul id="height">
      <li><a href="#welcomeAnchor">Welcome</a></li>
      <li><a href="#menuAnchor">Menu</a></li>
      <li><a href="#timesAnchor">Opening Times</a></li>
    </ul>
  </nav>
</div>

<div id="body"></div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

为什么不设定时间延迟？这是JS片段：

setTimeout( function(){ 
         // your function here
}, 300);

相应地设置毫秒，我输入300，将其更改为你需要的。

我去了你的演示并测试了这个并且它可以工作。 “if”声明不在正确的位置：

$(document).on("scroll", function() {
setTimeout(function(){
if ($(document).scrollTop() > 20) {
   $("header").addClass("shrink");
      $(".logo_animated").addClass("logo_display");
     } else {
   $("header").removeClass("shrink");
   $(".logo_animated").removeClass("logo_display");
}} , 900);
});

答案 1 :(得分：0)

像亚伦说的那样。取消注释setTimeout。

或者使用CSS解决方案。您可以使用以下简单属性延迟任何transition：

transition-delay: 0.9s;

所以在你的情况下。在你的css文件中创建以下类，如下所示：

.logo_display {
    margin-left: 1rem;
    transition-delay: 0.9s;
}


$(document).on("scroll", function() {
  if ($(document).scrollTop() > 20) {
    $("header").addClass("shrink");
    //setTimeout(function(){
    $(".logo_animated").addClass("logo_display");
    //}, 900);
  } else {
    $("header").removeClass("shrink");
    $(".logo_animated").removeClass("logo_display");
  }

});
* {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
}


/****************************************
****************HEADER*******************
****************************************/

#head-background {
  width: 100%;
  background-color: #111;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

header {
  width: 1200px;
  height: 100px;
  margin: 1em auto;
  text-align: center;
  overflow: hidden;
  transition: all 0.8s ease-in-out;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
}

.image {
  display: inline-block;
  margin: 0 auto;
  max-width: 322px;
  max-height: 100%;
  padding-top: 5px;
}

.address-info {
  float: left;
  color: #fff;
  width: 250px;
  text-align: left;
  font-size: 1rem;
  padding-top: 5px;
  padding-left: 1%;
  background-color: aqua;
}

.head-icons {
  float: right;
  list-style-type: none;
  display: block;
  width: 250px;
  text-align: right;
  background-color: aqua;
}

.head-icons li {
  display: inline-block;
  padding-right: 3%;
}

.head-icons li a {
  color: #fff;
  font-size: 2.5rem;
}

.head-icons li:nth-child(4) {
  display: block;
  margin-top: 0.5rem;
  color: #fff;
  font-size: 1rem;
}

.shrink {
  height: 0;
  margin-top: 0;
  margin-bottom: 0;
}


/****************************************
**************NAVIGATION*****************
****************************************/

nav {
  display: block;
  width: 100%;
  background-color: #777;
  font-size: 0;
}

nav ul {
  overflow: hidden;
  color: #fff;
  text-align: center;
  -webkit-transition: max-height 0.4s;
  -ms-transition: max-height 0.4s;
  -moz-transition: max-height 0.4s;
  -o-transition: max-height 0.4s;
  transition: max-height 0.4s;
}

nav ul li {
  display: inline-block;
  padding: 1rem 2rem;
}

nav ul li a {
  color: inherit;
  text-decoration: none;
  font-size: 1.5rem;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}


/****************************************
********STICKY NAVIGATION****************
****************************************/

.burger-button {
  width: 100%;
  text-align: right;
  box-sizing: border-box;
  padding: 0.5rem;
  cursor: pointer;
  color: #fff;
  font-size: 1.5rem;
  display: none;
}

.logo_animated {
  position: absolute;
  top: 1rem;
  margin-left: -20rem;
  width: 200px;
  display: inline-block;
  transition: margin-left 0.5s cubic-bezier(0.5, 0, 0.5, 1.6);
}

.logo_display {
  margin-left: 1rem;
  transition-delay: 0.9s;
}

#body{
  height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="head-background">
    <header>
      <h4 class="address-info">00 The Street<br>Bramhope<br>Leeds<br>LS00 000</h4>
      <img class="image" src="images/PopsiesLogoWhite.png">
      <ul class="head-icons">
        <li><a href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
        <!--
                 -->
        <li><a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
        <!--
                 -->
        <li><a href="mailto:popsiesfishandchips@yahoo.co.uk"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
        <!--
                 -->
        <li>0113 1234567</li>
      </ul>
    </header>

    <nav>
      <img class="logo_animated" src="images/popsies.svg">

      <div class="burger-button">
        <i class="fa fa-bars" aria-hidden="true"></i>
      </div>
      <!--

             -->
      <ul id="height">
        <li><a href="#welcomeAnchor">Welcome</a></li>
        <li><a href="#menuAnchor">Menu</a></li>
        <li><a href="#timesAnchor">Opening Times</a></li>
      </ul>
    </nav>
  </div>
  
  <div id="body">
    
  </div>
  
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

答案 2 :(得分：0)

您实际上可以毫不拖延地添加/删除两个类。使用硬编码延迟实际上是一种不好的做法。如果您调整CSS的继承方式，您可以这样做：

  

以下是更新的codepen及相关代码：

  1. 在JS中将.shrink添加到#head-background元素，并在css中应用规则，如：

    2. ＆＃13;
    ＆＃13; 
     #head-background.shrink header{
      height: 0;
      margin-top: 0;
      margin-bottom: 0;
    }
    ＆＃13;
    ＆＃13;
    ＆＃13;

    1. 像这样解析你的.logo_animated课程：

      2. ＆＃13;
      ＆＃13; 
      #head-background.shrink .logo_animated {//apply this rule only when #head-background has .shrink class too. 
      margin-left: 1rem;
      transition: margin-left .8s cubic-bezier(0.5, 0, 0.5, 1.6);
    }
      ＆＃13;
      ＆＃13;
      ＆＃13;

      您的JavaScript现在只会显示为：

      $(document).on("scroll", function() {
  if ($(document).scrollTop() > 20) {
    $("#head-background").addClass("shrink");
  } else {
    $("#head-background").removeClass("shrink");
  }

});

      注意你不需要单独添加/删除.logo_display类，它现在通过css继承来实现。

      以下是如何运作的：

      您将收缩类应用于head和.logo_animated的父级。然后设置一个选择器#head-background.shrink .logo_animated，告诉浏览器仅在.shrink类应用于父级后应用规则。这基本上可以为您提供所需的效果。请记住，您仍需要正确调整动画时间。在codepen示例中，我使用.8s作为.logo_animated。你现在可以进一步优化你的动画，让它看起来更流畅，我基本上把它留在你拥有的

相关问题
最新问题