Почему некорректно работает увеличение 'left' на 100% при нескольких кликах?

Question

[Эмиль Валеев]

$sliderArrows.on('click', 'li', function() {
  var $sliderPos;
  $sliderPos = $slider.position().left;
  if ($(this).hasClass('slider-arrows__el_prev') && $sliderPos < 0) {
    return $slider.animate({
      'left': '+=100%'
    }, 800);
  }
});
}

при первом клике left как положено с 0 становится 100%, а вот при втором почему-то 1270%, при третьем 14959% и так далее, увеличиваясь в 11 с лишним раз

Answer 1

[Матвей Мамонов]

Стоит сохранить изначальный размер в пикселях в отдельную переменную, а потом каждый раз увеличить на значение этой переменной.

Comments

[Эмиль Валеев]

пиксели не интересуют

[Матвей Мамонов]

Эмиль Валеев: Вы можете в стилях первоначально задать размер в процентах, но затребовать в JS в пикселях, тогда размер вернется в пикселях, но будет равен сгенерированному в процентах.

[Матвей Мамонов]

Эмиль Валеев: пусть вы указали в CSS left равный 100%. В JS сохраните этот размер в пикселях и он будет равен, например 1206px. Потом прибавляйте каждый раз это значение и оно будет увеличиваться на 100% от ИСХОДНОГО размера, а не от текущего.

[Эмиль Валеев]

Матвей Мамонов: поедет, если изменить размер окна браузера. я же хочу написать резину