Question

好的，所以我在加载页面后试图达到Adham Dannaway的网站（http://www.adhamdannaway.com/）的效果。

我已经考虑过在页面加载过渡时使用.addClass（），但我不认为这是一个好主意，所以我试图用另一种方式

这是我迄今为止所做的：

＆＃13;

$(function() {
  $('h6').hide().slideDown();
  var $li = $('li');
  $li.hide().each(function(index) {
    $(this).delay(700 * index).animate({

    }, 400);
  });

});

＆＃13;

header {
  width: 100%;
  font-weight: 400;
  position: absolute;
  top: 0;
}

#bara-wrap {
  max-width: 1040px;
  margin: 0 auto;
}

#bara {
  max-width: 1040px;
  margin: 0 auto;
}

.logo {
  width: 10%;
  float: left;
}

#bara ul {
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50.5%;
  transform: translate(-50%, -50%);
}

#bara li {
  display: inline;
  padding: 0 2em;
}

#bara a:hover {
  transition: ease 0.4s;
  color: #77dff1;
  border-bottom: 1px solid #77dff1;
}

#bara a {
  color: #eeede7;
  font-weight: 600;
  font-size: 1.8rem;
  text-decoration: none;
}

#social {
  float: right;
  display: inline-block;
}

ul.social {
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
}

li.x1 {
  display: inline;
  color: #eeede7;
  padding: 0 2em;
}

a.x1 {
  color: #eeede7;
  text-decoration: none;
  font-size: 2.5rem;
}

a.x1:hover {
  transition: ease 0.4s;
  color: #77dff1;
}

#active {
  color: #77dff1 !important;
  border-bottom: 1px solid #77dff1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
  <div id="bara-wrap">
    <img src="img/logo.png" alt="LOGO" class="logo" />
    <nav id="social">
      <ul class="social">
        <li class="x1"><a href="https://www.facebook.com" target="_blank" title="Facebook Page" class="x1"><i class="fab fa-facebook-f"></i></a></li>
        <li class="x1 x2"><a href="mailto:xm?cc=x" title="Contact me!" class="x1 x2"><i class="far fa-envelope"></i></a></li>
      </ul>
    </nav>
    <nav id="bara">
      <ul class="butoane">
        <li class="btn"><a href="index.html" id="active" class="home x1">home</a></li>
        <li class="btn"><a href="about.html" class="about x1">about</a></li>
        <li class="btn"><a href="skills.html" class="skills x1">skills</a></li>
        <li class="btn"><a href="contact.html" class="contact x1">contact</a></li>
      </ul>
    </nav>

＆＃13;

你能给我一些关于如何做的提示吗？

使用jQuery的效果

0 个答案: