The marquee has been deprecated and the alternative is to implement a css to perform the same text scrolling effect, which is valid.
But there was a need to get the moment when the scrolling of the text comes to an end, an event that was present in marquee through onfinish , is it possible to get the event using css and jQuery ?
A simple jQuery lib is link
Just call $("seu seletor(es)").marquee(); within $(function() {...}) or $.ready(function() {...}) and apply overflow: hidden; :
To pause use
pauseOnHover, to catch the event usebind("finished", function() {...})in the element
$(function() {
$('.box1, .box2').marquee();
$('.box3').bind("finished", function() {
console.log("Terminou!");
}).marquee({
"duration": 1000,
"pauseOnHover": true
});
});.box1, .box2, .box3 {
width: 200px;
height: 64px;
overflow: hidden;
}
.box1 {
background: #fc0;
}
.box2 {
background: #f0f0f0;
}
.box3 {
background: #f00;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js" type="text/javascript"></script>
<h2>Simples</h2>
<div class="box1">Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
<h2>Pra duplicar o conteudo e dar o efeito continue</h2>
<!-- duration é o tempo que leva para terminar, quanto maior mais devagar, gab é o espaço entre as duplicatas e 'duplicated' é para causar o efeito que está andando em circulos -->
<div class="box2" data-duration="5000" data-gap="10" data-duplicated="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit END.
</div>
<h2>Evento finished</h2>
<div class="box3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit END.
</div>You can directly configure the method as follows:
$('seu seletor').marquee({
//Velocidade em milesegundos
duration: 15000,
//Espaço em pixels entre as o elementos
gap: 50,
//Tempo em milesegundos antes de iniciar
delayBeforeStart: 0,
//direção 'left', 'right', 'up', 'down'
direction: 'left',
//Se true faz o elemento ser duplicado para causar o efeito de continuidade
duplicated: true
});
.bind for example): link
Methods: link
example:
var $mq = $('.marquee').marquee();
$("button.playpause").click(function() {
$mq.toggle(); //Alterna entre pausar e mover
});
For those who may have the same need, I've found an alternative to marquee , using Jquery ScrollBox