каждый() достигает только одного элемента

-3

Я прокручиваю до точки моего сайта, а затем вызываю функцию each() для анимации всех номеров (4). Однако функция each() работает только один раз, поэтому только один номер анимируется.каждый() достигает только одного элемента

var activated = 0; 

$(window).scroll(function() { 
    var hT = $('#scroll-to-numbers').offset().top, 
     hH = $('#scroll-to-numbers').outerHeight(), 
     wH = $(window).height(), 
     wS = $(this).scrollTop(); 

    if (wS > (hT + hH - wH)) { 
     if (activated == 0) { 
      activated = 1; 
      animateNumbers(); 
     }  
    } 
}); 

function animateNumbers(){ 
    $('#number-animate').each(function() { 
     $(this).prop('Counter',0).animate({ 
      Counter: $(this).text() 
     }, { 
      duration: 9000, 
      easing: 'swing', 
      step: function (now) { 
       $(this).text(Math.ceil(now)); 
      } 
     }); 
    }); 
}

<div class="row "> 
    <div class="col"> 
     <h3 class="text-center">text</h3> 
     <p class="bodytext"> 
      <span id="animate-number">1998</span> 
     </p> 
    </div> 
    <div class="col"> 
     <h3 class="text-center">text</h3> 
     <p class="bodytext"> 
      <span id="animate-number">250</span> 
     </p> 
    </div> 
    <div class="col"> 
     <h3 class="text-center">text</h3> 
     <p class="bodytext"> 
      <span id="animate-number">15</span> 
     </p> 
    </div> 
    <div class="col"> 
     <h3 class="text-center">text</h3> 
     <p class="bodytext"> 
      <span id="animate-number">350</span> 
     </p> 
    </div> 
</div>

источник

2016-04-25 dennis schütz

должен быть уникальным в контексте документа .. Используйте вместо этого класс. И так или иначе, в вашем опубликованном коде каждый цикл бесполезен, большинство методов jQuery protoype (setter) работают с несколькими элементами в согласованном наборе, зацикливая внутренне –

Прежде всего, использование CLASS вместо ID в этом случае.

Другие вещи., Как правило, петля внутри, как объясняет А. Вольф.

Давайте попробуем изменить некоторые из вас HTML и некоторые из ваших JS:

HTML идентификаторы

<div class="row"> 
    <div class="col animate-number-wrapper"> 
    <h3 class="text-center">text</h3> 
    <p class="bodytext"> 
     <span class="animate-number">1998</span> 
    </p> 
</div> 
<div class="col animate-number-wrapper"> 
    <h3 class="text-center">text</h3> 
    <p class="bodytext"> 
     <span class="animate-number">250</span> 
    </p> 
</div> 
<div class="col animate-number-wrapper"> 
    <h3 class="text-center">text</h3> 
    <p class="bodytext"> 
     <span class="animate-number">15</span> 
    </p> 
</div> 
<div class="col animate-number-wrapper"> 
    <h3 class="text-center">text</h3> 
    <p class="bodytext"> 
     <span class="animate-number">350</span> 
    </p> 
</div>

function animateNumbers(){ 
    $('.animate-number-wrapper').each(function() { 
    $elem = $(this).find('.animate-number'); 
    $elem.prop('Counter',0).animate({ 
     Counter: $elem.text() 
    }, { 
     duration: 9000, 
     easing: 'swing', 
     step: function (now) { 
      $elem.text(Math.ceil(now)); 
     } 
    }); 
    }); 
}

источник

2016-04-25 11:28:52

. В вашем html содержится одинаковый идентификатор, пожалуйста, измените их, так как это принятый ответ, и люди будут следовать этому , Спасибо. – Sudarshan

О да, я забыл. Это было частью моего ответа, но забыл обновить часть кода. Спасибо! : D @ Сударшан –

Пожалуйста, попробуйте эту скрипку, произошли некоторые изменения, необходимые, чтобы сделать как - это HTML-документ может иметь только один идентификатор для док - у вас есть # прокрутки к вершине элемент упоминается в JQuery, но нет, где он был добавлен в HTML

Здесь работает working demo

Вот ваш HTML-код, вы можете добавить свиток, где вы хотите, а также изменить имена классов, но пожалуйста, изменения в JS также.

<div class="row " id='scroll'> 
<div class="col"> 
<h3 class="text-center">text</h3> 
<p class="bodytext"> 
<span class="animate-number">1998</span> 
</p> 
</div> 
<div class="col "> 
<h3 class="text-center">text</h3> 
<p class="bodytext"> 
<span class="animate-number">250</span> 
</p> 
</div> 
<div class="col "> 
<h3 class="text-center">text</h3> 
<p class="bodytext"> 
<span class="animate-number">15</span> 
</p> 
</div> 
<div class="col"> 
<h3 class="text-center">text</h3> 
<p class="bodytext"> 
<span class="animate-number">350</span> 
</p> 
</div> 
</div>

Здесь JS код

var activated = 0; 
$(window).scroll(function() { 
var hT = $('#scroll').offset().top, 
    hH = $('#scroll').outerHeight(), 
    wH = $(window).height(), 
    wS = $(this).scrollTop(); 
    if (wS > (hT+hH-wH)){ 
     if(activated == 0) 
     { 
      activated = 1; 
      animateNumbers(); 

     }  
    } 
}); 
function animateNumbers(){ 
console.log('called'); 
    $('.bodytext>.animate-number').each(function() { 

     $(this).prop('Counter',0).animate({ 
      Counter: $(this).text() 
      }, { 
       duration: 9000, 
       easing: 'swing', 
       step: function (now) { 
        $(this).text(Math.ceil(now)); 
       } 
     }); 
    }); 
}

Для лучшего эффекта прокрутки, пожалуйста, попробуйте этот fiddle demo

источник

2016-04-25 11:24:51 Sudarshan

каждый() достигает только одного элемента

ответ

Смежные вопросы