Function does not continue after second execution in same class

Question

Function does not continue after second execution in same class

Navigation

#1 by (0 votes)

0

Well, I've been developing a kind of content slider that swaps content from a certain div ('.item .frase-test') to the content of the next item in the order of <span> .

I was able to do everything I needed to be done so far, but a catch prevents me from completing everything.

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

I've temporarily hosted here: link and as you can see, the loop continues, and the functions also agree, but the circle around does not.

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><scriptsrc="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 the spinner, I use the following plugin: link

Thank you!

jquery loop slider plugin

asked by anonymous 03.03.2015 / 19:53

1 answer

Arrow to go back to the previous slide is not working Retrieve fragment data

score 0 · Accepted Answer

I was able to solve your problem:

When you completed the animation of spin you were not completely destroying it, so this unwanted behavior happened.

As the plugin does not provide a destroy method, you will need to remove the widget and delete the instance of it, so 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 your algorithm to get the next btn-item, when it reaches 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');