javascript - 在父元素之后稍微淡化子元素

Question

我有一个带有标题/跨度覆盖的 div slider 。我希望跨度在幻灯片出现后稍微淡化。现在发生的是 div 和 span 一起淡出。

我已经尝试了动画淡入和跨度上的其他一些东西，但没有成功。幻灯片出现后，有什么方法可以使跨度逐渐消失几毫秒？我不介意 CSS 或脚本解决方案，但希望跨度在父幻灯片淡入后稍微淡入。

slider 代码为:

$(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()

});

html 是这样的:

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

使用 css:

.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;
}

和here's a JSFiddle使用当前代码。

Answer 1

我可以通过为 fadein 添加关键帧定义来让你的 fiddle 工作:

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

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

Fiddle