添加一個衰落的文字與圖像褪色=> JQuery的

Question

我創建了jQuery的這個交叉淡入淡出效果：

function doAnimationLoop(o, n, t, i, a) { 
 
     fadeInOut(o, n, t, i, function() { 
 
      setTimeout(function() { 
 
       doAnimationLoop(o, n, t, i, a) 
 
      }, a) 
 
     }) 
 
    } 
 
    
 
    function fadeInOut(o, n, t, i, a) { 
 
     return $(o).animate({ 
 
      opacity: 1 
 
     }, n).delay(t).animate({ 
 
      opacity: 0 
 
     }, i, a) 
 
    } 
 
    var duration = 20, 
 
     fadeAmount = .3; 
 
    $(document).ready(function() { 
 
     var o = $("#slideshow img"), 
 
      n = o.size(), 
 
      t = 3e3 * duration, 
 
      i = t/n, 
 
      a = i * fadeAmount, 
 
      e = i - i * fadeAmount * 2, 
 
      u = e * (n - 1) + a * (n - 2); 
 
     o.each(function(o, n) { 
 
      0 != o ? ($(n).css("opacity", "0"), setTimeout(function() { 
 
       doAnimationLoop(n, a, e, a, u) 
 
      }, e * o + a * (o - 1))) : setTimeout(function() { 
 
       $(n).animate({ 
 
        opacity: 0 
 
       }, a, function() { 
 
        setTimeout(function() { 
 
         doAnimationLoop(n, a, e, a, u) 
 
        }, u) 
 
       }) 
 
      }, e) 
 
     }) 
 
    });

.home h1 { 
 
    font-family: 'Open Sans'; 
 
    font-size: 5em; 
 
} 
 

 
.main { 
 
    text-shadow: 0px 0px 10px #696969; 
 
    position: absolute; 
 
    top: 2em; 
 
    color: #f6f6f6; 
 
    font-weight: 900; 
 
    z-index: 999; 
 
} 
 

 
.sub-main { 
 
    font-weight: 100; 
 
    position: absolute; 
 
    top: 3em; 
 
    color: white; 
 
    text-shadow: 0px 0px 50px #696969 !important; 
 
    z-index: 999; 
 
} 
 

 
#slideshow img { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    
 
}

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

 
<!--- Home ---> 
 
    <div class="container-fluid home" id="home"> 
 
     <div id="slideshow"> 
 
     
 
     <img src="http://assets1.ignimgs.com/2017/01/25/kingdomhearts28-1280-1485381321286_1280w.jpg" /> 
 
     
 
     <img src="http://s2.glbimg.com/C4MoBvLkWM9NFo8gtXNd9-mP-I8=/850x446/s.glbimg.com/po/tt2/f/original/2016/02/04/kingdom-hearts-4.jpg" /> 
 
     
 
     <img src="http://static.zerochan.net/Kingdom.Hearts.II.full.873765.jpg" /> 
 
     
 
     <img src="http://www.geekgirlauthority.com/wp-content/uploads/2016/10/Kingdom-Hearts.jpg" /> 
 
     
 
     <img src="http://2.bp.blogspot.com/-HS5t27V1LYw/UBGLg9eBDII/AAAAAAAABmY/A0U6fCuyDFc/s1600/Kingdom_Hearts_Wallpaper_by_Wightwizard8.jpg" /> 
 
     
 
     <img src="http://www.hardcoregamer.com/wp-content/uploads/2017/01/Kingdom-Hearts-Saga-747x309.jpg" /> 
 
     
 
     </div> 
 
     <section class="row"> 
 
     <div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1"> 
 
      <h1 class="main" style="z-index: 100;">Title</h1> 
 
      <h1 class="sub-main" style="z-index: 100;">Tagline</h1> 
 
     </div> 
 
     </section> 
 
     </div>

我面對我從來沒有遇到這之前是一個問題...

我想在這些圖像的頂部添加文字，每個圖像都有標題/標語。我希望文字淡入圖像！

如何使淡出圖像變爲淡入淡出的文字？

謝謝！

Answer 1

添加到您的CSS：

.anim{ 
    animation: opac 2s infinite; 
} 
@keyframes opac{ 
    from {opacity:0} 
    to {opacity:1} 
} 

那麼該類anim添加到您的標題，標語和告訴我們，如果這是你想要或不呢？