Alternative to the Event Trainer that fires on completion

Question

Alternative to the Event Trainer that fires on completion

Asked 7 years, 6 months ago

Viewed 211 times

1

The marquee has been discontinued and the alternative is to implement a css to perform the same text scrolling effect, which is valid.

But a need arose to get the moment when the scrolling of the text comes to an end, event that was present in marquee by means of the onfinish, it is possible to get the event using css and jQuery?

1

Duplicate question: http://answall.com/questions/11862/comort-fazer-um-marquee-sem-a-tag-marquee

– Wallace Maxters

2016/12/12 at 14:05
3

@Wallacemaxters this is not duplicate, here the AP wants an event inside the Marquee, is what title was not intuitive, but he wants something like onfinish

– Guilherme Nascimento

2016/12/12 at 14:08

2 answers

2

A simple jQuery lib is https://github.com/aamirafridi/jQuery.Marquee

Just call $("seu seletor(es)").marquee(); inside $(function() {...}) or $.ready(function() {...}) and apply overflow: hidden;:

To pause use pauseOnHover, to catch the event use the bind("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>

<script src="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>

jQuery.Marquee API

It is possible to configure directly in the method, thus:

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

List of options: https://github.com/aamirafridi/jQuery.Marquee#options
List of events (use with .bind for example): https://github.com/aamirafridi/jQuery.Marquee#Events

Methods: https://github.com/aamirafridi/jQuery.Marquee#methods

example:

  var $mq = $('.marquee').marquee();

  $("button.playpause").click(function() {
       $mq.toggle(); //Alterna entre pausar e mover
  });

Alternative to the Event Trainer that fires on completion

2 answers

jQuery.Marquee API

Related Posts