Question

我希望我位于html的navbar元素中的徽标图像缓慢下拉（甚至整个navbar本身），但是当我尝试使用JQuery时，它似乎无能为力（我不是很对此还不熟悉）。我认为这是由于我拥有的全屏视频以及与此相关的某种互动问题。关于如何制作的任何想法：

img src="img/logo.png"

带有下滑动画的

下拉菜单，即使完全可能，将不胜感激。谢谢。

我的代码

* {
  box-sizing: border-box;
}

.container {
  max-width: 960px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: auto;
  text-align: center;
}

.v-header {
  height: 100vh;
  display: flex;
  align-items: center;
  color: #fff;
 }

.fullscreen-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.fullscreen-video-wrap video {
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.header-overlay {
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;
  background: #225470;
  opacity: 0.4;
 }

.header-content {
  z-index: 2;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Social media icon sidebar -->
<div class="icon-bar">
    <a href="#" class="facebook">
        <i class="fa fa-facebook"></i>
    </a>
    <a href="#" class="twitter">
        <i class="fa fa-twitter"></i>
    </a>
    <a href="#" class="linkedin">
        <i class="fa fa-linkedin"></i>
    </a>
    <a href="#" class="youtube">
        <i class="fa fa-youtube"></i>
    </a>
</div>

<!-- Transparent navbar -->
<nav class="navbar sticky-top navbar-expand-sm navbar-dark transparent">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="img/logo.png" alt=" ">
        </a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Video for fullscreen intro with fallback video formats for different browsers -->
<header class="v-header container">
    <div class="fullscreen-video-wrap">
        <!-- muted for autoplay to work in Chrome -->
        <video muted autoplay="true" loop="true">
            <source src="video/holoVid.mp4" type="video/mp4">
            <source src="video/holoVid.webm" type="video/webm">
            <source src="video/holoVid.ogv" type="video/ogg">
            <!-- Provide user message if their browser doesn't support html5 video -->
            your browser doesn't support HTML5 video.
        </video>
    </div>
    <div class="header-overlay"></div>
    <div class="header-content">
        <h1>Welcome to the Video Wall</h1>
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        </p>
        <a href="# " class="btn btn-primary ">Read More</a>
    </div>
</header>

我正在尝试的jQuery：

 $(document).ready(function () {
        $('#hidden').slideDown(1000);
    });

和在CSS中：

#hidden {
  display: none;
 }

我在img类中添加了id =“ hidden”，但它所做的只是隐藏徽标，而不是按预期方式将其向下滑动。

Answer 1

这是您想要的效果的一般简单示例https://jsfiddle.net/Ipman/kps2gcn5/1/

<div class="parent">
   <div id="fake-image">
   </div>
</div>

CSS：

.parent {
   position: relative
 }

#fake-image {
   width: 50px;
   height: 50px;
   background-color: red;
   position: absolute;
   left: 0;
   top: -100px;
   transition: all ease 2s
}

脚本：

 $(document).ready(function () {
    $('#fake-image').css('top', '0px');
 });

图下拉问题

1 个答案: