背景图像在jQuery中淡出 [英] Background image fade out in jQuery

问题描述

我试图让背景.gif在8s后淡出。 7秒后，应出现文本和按钮。一切似乎都在工作，但是，文本和按钮似乎随着背景逐渐消失。它看起来可能是我设置html的方式，但我想知道是否有一种解决方法，如果只使用jQuery，也许几乎只是触摸HTML？建议欢迎提前致谢！

//隐藏DISPIRIT文本然后淡入$ （ 品牌航向 ）隐藏（）延迟（7000）.fadeIn（ 慢 ）; $（ BTN-圈 ）隐藏（）延迟（7000）.fadeIn（ 慢）。 ; // BG延迟然后淡出$（。intro-body）。delay（8000）.fadeOut（slow）;

  .intro {display：table;宽度：100％;身高：自动;填充：100px 0; text-align：center;白颜色; background-color：black;}。intro .intro-body {display：table-cell; vertical-align：middle;背景：url（../ img / static.gif）不重复底部中间滚动; -webkit-background-size：cover; -moz-background-size：cover; background-size：cover; -o-background-size：cover;} brand-heading {font-size：40px;} @ media（min-width：768px）{.intro {height：100％;填充：0; } .intro .intro-body .brand-heading {font-size：100px; } /*.intro .intro-body .intro-text {font-size：26px; } * /}。btn-circle {width：70px;身高：70px; margin-top：15px; padding：7px 16px;边框：2px纯白色;边界半径：100％！重要; font-size：40px;白颜色;背景：透明; -webkit-transition：背景0.3s缓出; -moz-transition：背景0.3s缓和; transition：background 0.3s ease-in-out;}   
  < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< header class =intro> < div class =intro-body> < div class =container> < div class =row> < div class =col-md-8 col-md-offset-2> < h1 class =brand-heading>< i> Dispirit< / i>< / h1> < p class =intro-text>< / p> < a href =＃aboutclass =btn btn-circle page-scroll> < i class =fa fa-angle-double-down animated>< / i> < / A> < / DIV> < / DIV> < / DIV> < / div>< / header>  

解决方案

在这里，您可以使用 https://jsfiddle.net/h72uvm4h/1/

//隐藏DISPIRIT文本然后淡入$（'延迟（7000）.fadeIn（slow）; // BG延迟然后淡出$（。intro-body）。

.intro {display：table;宽度：100％;身高：自动;填充：100px 0; text-align：center;白颜色; background-color：black;}。intro .intro-body {display：table-cell; vertical-align：middle;背景：url（../ img / static.gif）不重复底部中间滚动; -webkit-background-size：cover; -moz-background-size：cover; background-size：cover; -o-background-size：cover;}。brand-heading {font-size：40px;}。container {display：none;} @ media（min-width：768px）{.intro {height：100％;填充：0; } .intro .intro-body .brand-heading {font-size：100px; } /*.intro .intro-body .intro-text {font-size：26px; } * /}。btn-circle {width：70px;身高：70px; margin-top：15px; padding：7px 16px;边框：2px纯白色;边界半径：100％！重要; font-size：40px;白颜色;背景：透明; -webkit-transition：背景0.3s缓出; -moz-transition：背景0.3s缓和; transition：background 0.3s ease-in-out;}

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< header class =intro> < div class =intro-body> < / DIV> < div class =container> < div class =row> < div class =col-md-8 col-md-offset-2> < h1 class =brand-heading>< i> Dispirit< / i>< / h1> < p class =intro-text>< / p> < a href =＃aboutclass =btn btn-circle page-scroll> < i class =fa fa-angle-double-down animated>< / i> < / A> < / DIV> < / DIV> < / div>< / header>

HTML 结构有点，因为如果您隐藏父 容器，您将无法看到 child 元素。

我从简介中拿出容器类 -body 并设置 display：none; 最初使用 CSS & jQuery 。

希望这能解决您的问题。

I'm trying to make the background .gif fade out after 8s. 7s later a text and a button should appear. Everything seems to be working so far however, the text and button seems to fade out along with the background. It looks like it may be the way I set up the html but I was wondering if there was a way around this if using just jQuery and maybe barely just touching with the html? Suggestions welcomed thanks in advance!

// Hide DISPIRIT text then fade in
$(".brand-heading").hide().delay(7000).fadeIn("slow");
$(".btn-circle").hide().delay(7000).fadeIn("slow");
// BG delay then fade out
$(".intro-body").delay(8000).fadeOut("slow");

.intro {
  display: table;
  width: 100%;
  height: auto;
  padding: 100px 0;
  text-align: center;
  color: white;
  background-color: black;
}

.intro .intro-body {
  display: table-cell;
  vertical-align: middle;
  background: url(../img/static.gif) no-repeat bottom center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.brand-heading {
  font-size: 40px;
}

@media (min-width: 768px) {
  .intro {
    height: 100%;
    padding: 0;
  }
  .intro .intro-body .brand-heading {
    font-size: 100px;
  }
  /*.intro .intro-body .intro-text {
        font-size: 26px;
      }*/
}

.btn-circle {
  width: 70px;
  height: 70px;
  margin-top: 15px;
  padding: 7px 16px;
  border: 2px solid white;
  border-radius: 100% !important;
  font-size: 40px;
  color: white;
  background: transparent;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="intro">
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h1 class="brand-heading"><i>Dispirit</i></h1>
          <p class="intro-text"></p>
          <a href="#about" class="btn btn-circle page-scroll">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>

解决方案

Here you go with a solution https://jsfiddle.net/h72uvm4h/1/

// Hide DISPIRIT text then fade in
$('.container').hide().delay(7000).fadeIn("slow");
// BG delay then fade out
$(".intro-body").delay(8000).fadeOut("slow");

.intro {
  display: table;
  width: 100%;
  height: auto;
  padding: 100px 0;
  text-align: center;
  color: white;
  background-color: black;
}

.intro .intro-body {
  display: table-cell;
  vertical-align: middle;
  background: url(../img/static.gif) no-repeat bottom center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.brand-heading {
  font-size: 40px;
}

.container {
  display:none;
}

@media (min-width: 768px) {
  .intro {
    height: 100%;
    padding: 0;
  }
  .intro .intro-body .brand-heading {
    font-size: 100px;
  }
  /*.intro .intro-body .intro-text {
        font-size: 26px;
      }*/
}

.btn-circle {
  width: 70px;
  height: 70px;
  margin-top: 15px;
  padding: 7px 16px;
  border: 2px solid white;
  border-radius: 100% !important;
  font-size: 40px;
  color: white;
  background: transparent;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="intro">
  <div class="intro-body">
  
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <h1 class="brand-heading"><i>Dispirit</i></h1>
        <p class="intro-text"></p>
        <a href="#about" class="btn btn-circle page-scroll">
          <i class="fa fa-angle-double-down animated"></i>
        </a>
      </div>
    </div>
  </div>
</header>

I have changed the HTML structure a bit, because if you hide the parent container you won't be able to see the child elements.

I took out the container class out of intro-body and set display: none; initially using CSS & jQuery.

Hope this will solve you problem.

这篇关于背景图像在jQuery中淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！