淡入淡出的父子元素

Question

我有一個帶有標題/跨度疊加的div滑塊。幻燈片出現後，我希望span會稍微淡化。現在發生的事情是div和跨度一起褪去。

我試過動畫fadein和其他一些事情的跨度，但它沒有采取。幻燈片出現後，有沒有什麼辦法讓這個跨度褪色幾毫秒？我不介意無論是CSS或腳本的解決方案，但想跨度褪色父幻燈片淡入後小幅

滑塊代碼：

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

我能夠通過添加關鍵幀定義淡入，讓您的工作小提琴：

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

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

Fiddle