Анимация цены при выборе атрибутов

  • 0 Ответов
  • 457 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

shurakana

  • Завсегдатай
  • *****
  • 793
  • 43
Всем привет!

В недавнем проекте делал анимацию цены при смене атрибутов и пр. и решил выложить решение здесь..
Качаем плагин по ссылке - https://github.com/aishek/jquery-animateNumber

Идем в \components\com_jshopping\js\functions.js и в самый конец вставляем код из файла "jquery.animateNumber.min.js" из архива..

Чуть выше создаем функцию:
Код
function animate(price){
var decimal_places = 2; // кол-во символов после разделителя, если нужен разделитель тысяч поставьте 0
var decimal_factor = 1000; // разделитель
var old_price = jQuery("#block_price").text().replace(' EUR', ''); // EUR меняем на свое

jQuery('#block_price').prop('number', old_price).animateNumber({
number: price,
numberStep: function(now, tween){
var floored_number = Math.floor(now) / decimal_factor, target = $(tween.elem);
if(decimal_places > 0){
var floored_number = floored_number.toFixed(decimal_places);
}
//floored_number = floored_number.toString().replace('.', ' '); // если у вас разделитель не точка, то раскомментируйте, и укажите разделитель вместо пробела
jQuery("#block_price").text(floored_number + " EUR"); // EUR меняем на свое
},
easing: 'easeInQuad' // тип анимации - разницы не заметил
},1500); // скорость анимации
}

В этом примере все делал в стандартном шаблоне, и со стандартной разметкой, так что меняем в обоих местах EUR на свою валюту, или что у вас после цены..
В строке 775 комментируем:

Код: php
//jQuery("#block_price").html(json.price); 

и ниже добавляем код:
Код: php
animate(json.pricefloat);

Вот и все, теперь меняем атрибут, и ваша цена плавно анимируется..))))

UPD в функцию animate(), после:
var old_price = jQuery("#block_price").text().replace(' EUR', ''); // EUR меняем на свое

надо добавить:

Код
old_price = old_price.replace('.', ''); // если у вас разделитель пробел, ставим его вместо точки

« Последнее редактирование: 16.08.2015, 12:30:36 от shurakana »
Эта подпись отображается внизу каждого Моего сообщения. Я также могу использовать BB код и смайлы.