Function does not continue after second run in the same class

Asked

Viewed 134 times

0

Well, I’ve been developing a kind of "content slider" that changes the content of a certain div ('.item .frase-test') for the content of the following item in the order of <span>.

I’ve managed to do everything I needed done so far, but one snag keeps me from ending it.

After once running the script in the active class in the loop, the counter that is in each item does not work, I’ve tried even using different Dexes and everything else for each one, but nothing done...

Temporarily stay here with us: http://badoc.com.br/labs/timer and as you can see, the loop continues, and the functions are also in agreement, but the circle around.

EDIT:

$(function () {
  var spin = function() {      
    $('.btn-ativo').circleProgress({
      value: 1,
      size: 79,
      fill: { color: "#bfd432" },
      animation: { duration: 1000 }
    }).on('circle-animation-end', function (event) {
      $(this + 'canvas').fadeOut(300);
    });
  };
  $('.btn-item').on('click', function () {

    var btn = $('.btnss').parent();
    var self = this;
    var parent = $('.items').parent();
    var id = $(this).data('id');
    var mostrar = parent.find('.' + id);

    $('.btn-item.btn-ativo').removeClass('btn-ativo');
    $(this).addClass('btn-ativo');

    parent.find('.ativo').fadeOut(200, function () {
      $(this).removeClass('ativo');
    });
    $(parent).fadeIn(400, function () {
      $(this).addClass('ativo');
    });
    $(mostrar).addClass('ativo', 400);
  });

  setInterval(function () {
    $('.btnss').parent().find('.btn-item.btn-ativo').removeClass('btn-ativo').next().addClass('btn-ativo');

    if ($('.btn-item.btn-ativo').hasClass('last')) {
      $('#item').addClass('btn-ativo');
    }
    if ($('#item').hasClass('.btn-ativo')) {
      $('.item span').toggleClass('ativo');
    }
    $('.item').parent().find('.ativo').fadeOut(200, function () {
      $(this).removeClass('ativo');
    });
    $('.' + $('.btn-item.btn-ativo').data('id')).fadeIn(200, function () {
      $(this).addClass('ativo');
    });
    spin();
  }, 1000);

  $('.item').height($('.item span').height() + 60);
  spin();
});
body {
  padding-top:40px;
}

.frase-test {
  background-color:#ccc;
  background-size:contain;
  width:100%;
  height:auto;
  background-position:center center;
  font-size:25px;
  position:relative;

}



.frase-test span {
  display: none;
  position:absolute;
  top:0;
  left:0;
  padding:30px;
}

.ativo {
  display:block !important;
}


.user {
  position:relative;
}

.user-info {
  position:absolute;
  top:0;
  left:0;
  right:0;
}

.user-info span {
  display:none;
  position:absolute;
  top:0 !important;
  left:0;
  right:0;
  margin:auto 0;
}

.btn-group {
  position:absolute;
  bottom:30px !important;
}

.btn-ativo {
  pointer-events:none !important;
}

*:focus {
  outline:none !important;
}

.btn {
  background-color:transparent !important;
  border:none !important;
  position:absolute;
  margin-right:30px;

}

.btn span, .btn canvas {
  position:absolute;
  top:10;
  left:10;
}


.carre {
  width:79px;
  height:79px;
  position:relative;
  display:inline-block;
}


.carre span {
  position:absolute;
  bottom:53px !important;
  position:absolute !important;
  top:15px;
  left:31px;
  background: transparent;
  text-align: center;
  font-size:36px !important;
  cursor:pointer;
  display:inline-block;
  color:#000;
}

.btn-ativo span {
  color:#bfd432 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kottenator.github.io/jquery-circle-progress/dist/circle-progress.js"></script>
<div class="container items">
  <div class="row">
    <div class="col-md-12">

      <!-- ITEM 1 (ativo by default) -->
      <div class="item frase-test text-center">
        <span class="ativo item1">
          Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim.
        </span>
        <span class="item2">
          Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
        </span>
        <span class="item3">
          adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
        </span>
        <span class="item4">
          Mussum ipsum cacilds, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
        </span>
      </div>
    </div>
  </div>
  <br>
  <br>
  <div class="row">
    <div class="col-md-12">
      <div class="item user">
        <div class="user-info">
          <span class="ativo text-center item1 test-item">
            <img src="http://placehold.it/150x150" class="img-circle center-block">
            <h3>John Doe</h3>
            Diretor Criativo
          </span>
          <span class="text-center item2 test-item">
            <img src="http://placehold.it/150x150" class="img-circle center-block">
            <h3>John Doe 2</h3>
            Diretor Criativo
          </span>
          <span class="text-center item3 test-item">
            <img src="http://placehold.it/150x150" class="img-circle center-block">
            <h3>John Doe 3</h3>
            Diretor Criativo
          </span>
          <span class="text-center item4 test-item">
            <img src="http://placehold.it/150x150" class="img-circle center-block">
            <h3>John Doe 4</h3>
            Diretor Criativo
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="btnss">
    <a id="item" data-id="item1" data-single="1" class="btn-item carre btn-ativo 1"><span>1</span></a>
    <a id="item" data-id="item2" data-single="2" class="btn-item carre 2"><span>2</span></a>
    <a id="item" data-id="item3" data-single="3" class="btn-item carre 3"><span>3</span></a>
    <a id="item" data-id="item4" data-single="4" class="btn-item carre 4"><span>4</span></a>
    <a id="item" class="btn-item carre last hidden"><span></span></a>
  </div>
</div>

For spinner, I use the following plugin: https://github.com/kottenator/jquery-circle-progress

Thank you!

jquery loop plugin slider
  • 2

    Post the code you already have here.

  • Hello @Luishenrique, first thank you so much for the quick reply! I will update the original topic with the codes in a moment, please.

  • @Raphael, can edit your question to add a snippet that reproduces your problem?

  • Ready! Edited, thanks for the replies friends!

  • @Raphael, I tried to edit your example so that it can run on the topic itself, check if the same unwanted behavior is happening.

  • Thank you Toby, yes, it happens the same way, the loop continues, but the spinner doesn’t. And sorry for my "noobisse" here, always used to ask questions with existing questions but never to make my own hehe

Show 1 more comment

1 answer

0


I managed to solve your problem:

When finishing the animation of the spin you weren’t completely destroying it, so this unwanted behavior happened.

since the plugin does not provide a Destroy method, you will need to remove the widget and delete the instance of it, for this you can see the spin method with the modifications below.

var spin = function() {  
    var widget = $('.btn-ativo').circleProgress({
        value: 1,
        size: 79,
        fill: { color: "#bfd432" },
        animation: { duration: 1000 }
    });
    widget.on('circle-animation-end', function (event) {          
        widget.circleProgress('widget').remove();
        widget.data('circle-progress', null);
    });
};

The second point, is its algorithm to catch the next btn-item, when it arrived at the last visible element, it selects the next (Hide) and the first.

the changes below should resolve.

var btItens = $('.btnss').parent().find('.btn-item');
var atual = btItens.filter('.btn-ativo');
var proximo = atual.next();
if (proximo.hasClass('last'))
    proximo = btItens.first();
atual.removeClass('btn-ativo');
proximo.addClass('btn-ativo');

  • Thank you very much Toby! The loop part is perfect now! But I don’t know if it was lack of attention from me or something, but after entering the second code, the items are "jumping" randomly between them. And one more thing, even though the loop is perfect, after clicking on a previous or later, the script does not continue after element as it was clicked. Well, that’s it, thank you so much for everything, then let me know how to buy you a beer! Hugs!

  • If possible, could you pass the entire JS code at once? Just so I can compare and see if the edits I made were in the right place. Thank you!

  • I can, but not now

  • Good morning, no problem!

Browser other questions tagged jquery loop plugin slider

You are not signed in. Login or sign up in order to post.