Member 13365366 Ответов: 1

Как я могу быть счетчиком инцерементов

Я пишу некоторый код, который работает, но не совсем верно.
это мой код:
Он увеличивается, но в конце также уменьшается, а затем увеличивается не до моего желания.
Я хочу, чтобы каждый раз, когда он парит, он становился приращением.

Что я уже пробовал:

<div id="shiva"><span class="count">200</span></div>
<div id="shiva"><span class="count">1000</span></div>
<div id="shiva"><span class="count">853</span></div>
<div id="shiva"><span class="count">154</span></div>
<div id="shiva"><span class="count">10</span></div>
<div id="shiva"><span class="count">87</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">1421</span></div>
<div id="talkbubble"><span class="count">145</span></div>
<div id="talkbubble"><span class="count">78</span></div>
<br />
<br />
<a class="linker" href="http://www.i-visionblog.com/2014/11/jquery-animated-number-counter-from-zero-to-value-jquery-animation.html"  target="_blank">visit Tutorial in Blog</a>
<br />




CSS 
#shiva
{
  width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  float:left;
  margin:5px;
}
.count
{
  line-height: 100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
  float:left;
  margin:20px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

.linker
{
  font-size : 20px;
  font-color: black;
}



JS 
 $(document).ready(function(){
        $('#shiva').on('mouseover', function(){$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {   
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
          
});});});

ZurdoDev

Отладьте свой код и узнайте, что происходит.

1 Ответов

Рейтинг:
2

Thomas Daniels

Во - первых, "идентификатор" должен быть уникальным-здесь это не так. Я не знаю, если цель состоит в том, чтобы позволить им всем сразу увеличиваться при наведении, но если это так, вам лучше дать им класс 'Шива' и 'talkbubble и изменять код JavaScript и CSS соответственно.

Теперь к вашей реальной проблеме: причина, по которой она уменьшается в конце.

У вас есть эта линия:

Counter: $(this).text()
Вы говорите считать до текущего текстового значения. Но что делать, если вы наведете курсор мыши на элемент, пока текст нет 200? Затем после первого счетчика вы начнете другой счетчик, который просто отсчитывает назад. Это не то, чего ты хочешь. Таким образом, вы можете установить data-max атрибут для каждого интервала счетчика, содержащего значение для подсчета:
<div id="shiva"><span class="count" data-max="200">200</span></div>

А затем, вместо того чтобы использовать .text (), чтобы получить значение для подсчета, используйте .data('max').

Но это еще не все - когда я попробовал это сделать, он засчитывался только один раз, и не на всех парениях. Чтобы решить эту проблему, вы можете сказать, чтобы анимировать { Counter: 0 } до 200, а не элемент jQuery после установки свойства. Обратите внимание, что если вы сделаете это, вы не сможете использовать $(this).text больше, поэтому вы должны установить переменную типа var counterSpan прежде чем заменить ваш $(this).

Кроме того, вы хотите mouseenter вместо mouseover, так что вы не получаете тонны событий, когда мышь остается на элементе.

Наконец, выполнение описанных выше действий приведет к повторному запуску счетчика, когда вы выйдете и войдете во второй раз. Это звучит не очень-то желательно. Таким образом, в начале анимации вы можете установить .prop("animating", true) а перед этим проверьте, есть ли .prop("animating") это правда: если это так, вы не хотите анимировать, потому что анимация уже происходит. Когда анимация будет завершена, вы хотите снова установить опору "анимация" в значение false, чтобы вы могли анимировать ее во второй раз.

Все это вместе взятое, вы получаете этот код:
$(document).ready(function() {
  $('#shiva').on('mouseenter', function() {
    $('.count').each(function() {
      var counterSpan = $(this);
      if (counterSpan.prop('animating')) {
        return;
      }
      counterSpan.prop('animating', true);
      $({
        Counter: 0
      }).animate({
        Counter: $(this).data('max')
      }, {
        duration: 4000,
        easing: 'swing',
        step: function(now) {
          counterSpan.text(Math.ceil(now));
        },
        complete: function() {
          counterSpan.prop('animating', false);
        }
      });
    });
  });
});

Живая демонстрация: на JSFiddle[^]