javascript - 检查文本何时位于特定位置

Question

我在使用 jquery marquee 插件向下滚动的 div 中有文本。它有点像我正在从事的元素的介绍。我想在 div 中的文本完全滚动后立即向用户显示该元素。

我怎么知道文本何时完全从屏幕上消失了？我如何获得它的位置？

PS:在你认为你知道它应该如何工作之前。您可以在代码段中使用我的代码自己尝试一下吗？

/*INTRO*/
    $('#intro').marquee({
        duration: 15000,
        gap: 5,
        delayBeforeStart: 0,
        direction: 'down',
        pauseOnHover: true,
        duplicated: false
    });

#intro{
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	position: absolute; 
	opacity: 0.5;
	font-size: 140%;
	text-align: center;
	height: 200%;
	top: -20%;
    left: 7%;
	padding-left:15%;
	padding-right:15%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src='//cdn.jsdelivr.net/jquery.marquee/1.3.9/jquery.marquee.min.js'></script>
  <div id="intro"><p><b><i>THIS IS MY SCROLLING INTRO THAT'S SUPPOSED TO SHOW THE NEXT THING ONLY WHEN THE TEXT IS COMPLETELY DONE SCROLLING</i></p></div>

这是一个 fiddle也是如此。

Answer 1

您可以在$('#intro') 上使用finished 事件，就像这样

$('#intro').on('finished', function () {
    alert('Text done scrolling');
});

Updated Fiddle

更新:

嘿，如果你想在 destroy 选取框后立即显示一些内容，以阻止它连续旋转，从而阻止客户端的内存消耗。

所以我更新了the fiddle展示它是如何工作的，但变化很小:

HTML:

  <div id="intro"><p><b><i>THIS IS MY SCROLLING INTRO THAT'S SUPPOSED TO SHOW THE NEXT THING ONLY WHEN THE TEXT IS COMPLETELY DONE SCROLLING</i></b></p></div>

  <div id="project">
    <h1>
      Project here
    </h1>
  </div>

额外的 CSS:

#project {
  display: none;
}

#project.active {
  display: block;
}

最后是 JS:

/*INTRO*/
    $('#intro')
    .bind('finished', function(){
                console.log('has finished');
                //Change text to something else after first loop finishes
        $(this).marquee('destroy'); // I thought it would remove the element, but it just stop the marquee
        $(this).hide(); // So perhaps hide you would like to hide it.
        //Show project
        $('#project').addClass('active');
    })
    .marquee({
        duration: 15000,
        gap: 5,
        delayBeforeStart: 0,
        direction: 'down',
        pauseOnHover: true,
        duplicated: false
    });