javascript - Skrollr 淡入淡出文本不起作用，但所有其他 skrollr 元素都起作用

Question

在我网站的某些元素上使用 skrollr 时遇到一些问题。它适用于背景，但我试图淡入和淡出带有文本的 div，但它不起作用……我一定是做错了什么，所以我创建了一个 jsfiddle 来显示这个问题。希望有人知道我做错了什么。

HTML代码

<div class="container" id="test">
  <div class="section"></div>
</div>
<div class="container" id="info">
  <div class="section-wrapper">
    <div class="row section" data-center="background-position: 0 50%;" data-bottom-top="background-position: 0px 40%;" data-anchor-target="#info">
      <div id="info-wrapper" class="col-md-6 col-md-offset-5" data-center="opacity: 1" data-bottom-top="opacity: 1;" data-anchor-target="info-wrapper">
        <h2>Test</h2>
        <p>This text isn't fading in or out... What is wrong?</p>
      </div>
    </div>
  </div>
</div>

CSS

html {
overflow-y: scroll;
}

.navbar {
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
}

#top-nav .active {
border-bottom: 3px #643b8d solid;
}

.section {
/*margin-top: -50px;*/
padding-top: 50px;
margin: 10px 0;
}

#test .section {
background:url(http://ihatetomatoes.net/demos/parallax-scroll-effect/img/bcg_slide-5.jpg) no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 750px;
width: 100%;
position: relative;
}

#info .section {
background:url(http://ihatetomatoes.net/demos/parallax-scroll-effect/img/bcg_slide-5b.jpg) no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 750px;
width: 100%;
position: relative;
}

#info-wrapper {
background-color: rgba(255,255,255,0.75);
opacity: 0;
}

Example here

谢谢

Answer 1

uncaught exception: Unable to find anchor target "info-wrapper"

它是 data-anchor-target="#info-wrapper" 而不是 data-anchor-target="info-wrapper"。除此之外，两个关键帧都定义了 opacity:1。

更正:http://jsfiddle.net/ak7Bg/1/