Stop a marquee 5 seconds for every 10 seconds
Question
I want to create an marquee that start at first, but every 10 seconds, the marquee will stop for 5 seconds before the marquee start again.
How can I do that?
I only manage to create a timer that stop the marquee after 5 seconds :
<script>
function startLoop() {
setInterval( "doSomething()", 5000 ); }
function doSomething() {
document.getElementById('myMarquee').stop(); }
</script>
HTML
<body onload="startLoop();">
<marquee direction="right" id="myMarquee">This is a marquee.</marquee>
</body>
5 answers
solution1
3 ACCPTED 2012-11-20 07:46:52
A few days ago I needed something similar to your problem. I soon figured out that marquee is not a standard element, so you can't use it in cross-browser solutions.
I have extracted the animation part, based on jQuery, I used in my solution, you can see the effect in this jsFiddle
HTML
<div id="container">
<div id="mytext">
this is a simple text to test custom marquee
</div>
</div>
CSS
#container
{
display: inline-block;
background-color: #cccccc;
width: 100px;
height: 100px;
overflow: hidden;
}
#mytext
{
display: inline-block;
position: relative;
white-space: nowrap;
}
JavaScript
$(function() {
var txt = $("#mytext");
txt.bind('scroll', function () {
var el = $(this);
// Scroll state machine
var scrollState = el.data("scrollState") || 0;
el.data("scrollState", (scrollState + 1) % 4);
switch (scrollState) {
case 0: // initial wait
el.css({ left: 0 });
el.show();
window.setTimeout(function () {
el.trigger("scroll");
}, 5000);
break;
case 1: // start scroll
var delta = el.parent().width() - el.width();
if (delta < 0) {
el.animate({ left: delta }, 2000, "linear", function () {
el.trigger("scroll");
});
}
break;
case 2: // delay before fade out
window.setTimeout(function () {
el.trigger("scroll");
}, 2000);
break;
case 3: // fade out
el.fadeOut("slow", function () {
el.trigger("scroll");
});
break;
}
}).trigger("scroll");
});
It doesn't do exaclty the same as your requirement, but if you read the code and make some changes to the state-machine, you will get it working :)
solution2
0 2012-11-20 07:57:43
If you want to keep using the marquee, this should work (In browsers that support the marquee):
<script>
function stopRunning() {
document.getElementById('myMarquee').stop();
setInterval("startRunning()", 5000);
}
function startRunning() {
document.getElementById('myMarquee').start();
setInterval("stopRunning()", 10000);
}
//You don't really need a function to start the loop, you can just call startRunning();
startRunning();
</script>
This will make the marquee start running, stop after 10 seconds, start again after 5, and repeat.
solution3
0 2012-11-20 07:59:47
try this:
var myMarquee = document.getElementById('myMarquee');
run();
function run() {
setTimeout(function() {
myMarquee.stop();
setTimeout(function(){
myMarquee.start();
run();
},5000);
},10000);
}
see it run at http://jsfiddle.net/gjwYh/
solution4
0 2012-11-20 08:48:47
To implement every 10 seconds, the marquee will stop for 5 seconds before the marquee start again You need some logic like. I have used step variable to control the progress. Hope its clear
<script>
var step = 1; // marquee is run on load time
function startLoop()
{
setInterval("doSomething()", 5000 );
}
function doSomething()
{
if (step == 0) {
// 5 seconds are passed since marquee stopped
document.getElementById('myMarquee').start();
step = 1;
}
else
{
if (step == 1) {
// 5 seconds are passed since marquee started
step = 2; // Just delay of another 5 seconds before stop
}
else
{
if (step == 2) {
// 10 seconds are passed since marquee started
document.getElementById('myMarquee').stop();
step = 0;
}
}
}
}
</script>
Check Out its Working Here on Jsfiddle . I have also added a timer in a div which will give you ease in checking the behavior of stop and start against time
solution5
0 2020-01-05 04:09:51
if you want to apply same in angular then you do like this
import { Component, OnInit , ElementRef, ViewChild} from '@angular/core';
write this under class
@ViewChild('myname', {static: false}) myname:ElementRef;
to start the loop write this under ngOnInit
setTimeout(()=>{ //<<<--- using ()=> syntax
this.startRunning()
console.log("aaa")
}, 1000);
place this code outside of ngOnInit
startRunning() {
setInterval(() =>{
this.myname.nativeElement.stop();
setTimeout(() =>{
this.myname.nativeElement.start();
console.log("start")
},2000)
console.log("stop")
}, 4000);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.