Fade child element in a little after parent

Question

I have a div slider with a caption/span overlay. I would like the span to fade up slightly after the slide appears. Right now what happens is that the div and the span fade up together.

I've tried animation fadein and a few other things on the span, but it hasn't taken. Is there any way to have that span fade up a few milliseconds after the slide appears? I wouldn't mind either a CSS or script solution, but would like the span to fade in slightly after the parent slide fades in.

The slider code is:

$(function(){

  var _interval;
  var elem = $(".fadelinks");
  elem.find("> :gt(0)").hide();
  elem.hover(function() {
    clearInterval(_interval)

  }, function() {
    interval()

  });
  var interval = function() {
  _interval = setInterval(function(){
                elem.find("> :first-child")
               .fadeOut().next().fadeIn().end()
               .appendTo(elem);
              }, 5000)
  };
  interval()

});

The html is along the lines of:

<div class="fadelinks">
   <div><span>...</span><img></div>
   <div><span>...</span><img></div>
</div>

With a css of:

.fadelinks { 
    position:relative; 
    width:555px;
    height:230px;    
}
.fadelinks > * { 
    position:absolute; 
    top:0; 
    left:0; 
    display:block; 
}
.fadelinks span {
    position:absolute;
    top:0;
    left:0;
    padding:2px 7px;
    color:#fff;
    background:#000;
    opacity:0.8;
    -webkit-animation:fadein 2s; animation:fadein 2s;
}

And here's a JSFiddle with the current code.

Travis Schettler Travis Schettler · Accepted Answer · 2016-01-26T20:59:44

I was able to get your fiddle working by adding a keyframes definition for fadein:

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Fiddle

Fade child element in a little after parent

1 Answers