Question

我在div中使用 jquery marquee 插件向下滚动文本。它有点像我正在研究的项目的介绍。一旦div中的文本完全滚动，我想向用户显示该项目。

如何知道文字何时从屏幕上消失？我如何得到它的位置？

PS：在您认为自己应该如何运作之前。您可以使用我在代码段中的代码自己试一试吗？

＆＃13;

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

此处还有fiddle。

Answer 1

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

$('#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
    });

检查文本何时处于特定位置

1 个答案: