Question

我有一个带有标题/跨度覆盖的div滑块。幻灯片出现后，我希望跨度略微淡化。现在发生的事情是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

通过为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

在父母之后稍微淡化儿童元素

1 个答案: