JQuery Highlight применяет тонну, как этого избежать

Question

Я делаю сайт для бронирования мест в поезде. В форме необходим калькулятор цены, чтобы показать клиенту общую сумму при выборе услуги, количество пассажиров и т. Д.

Чтобы сделать изменение общей стоимости более очевидным, я использовал эффект подсветки jq для div, просто чтобы привлечь больше внимания.

Проблема в том, что у меня было выделение, когда слайдер скользит, поэтому, если я прохожу от 0 до 56 (максимальное количество мест в вагоне поезда), выделение происходит 56 раз.

Надеюсь, вы могли бы помочь или предложить лучшую идею.

Вот код:

$(document).ready(function(){   
    /**/
    function calculateTotal(){
        //var unitPrice = 2, paperTypes = 2, printedSides = 2;
        var precio_base  = $('#categoria option:selected').val();
        var cant_adultos = $("#adultos").val();

        var cant_ninos = $("#ninos").val();
        var sum = parseInt(cant_adultos) + parseInt(cant_ninos);
        var precio_productos = $("input[name^='servicio']").parseNumber();

        var totalCost = parseInt(precio_base)*parseInt(sum);

        $('#total-box').html("$"+totalCost);
        $('#total-box').effect("highlight", {}, 1000);
    }

    $('#categoria,#adultos,#ninos').change(calculateTotal).highlight();

});

Страница находится по адресу http://www.micontrol.cl/~mvargas/wordpress/wp-transatacama/reservas-rapidas/form-reservas.php.

Answer 1

Вам нужно прекратить запуск события изменения на каждом шаге слайда. Просто запустите это при остановке события. например: http://jsbin.com/atolax/2

Answer 2

Предполагая, что вы используете виджет-слайдер из пользовательского интерфейса jQuery (пользовательский интерфейс jQuery включен на страницу, на которую вы ссылаетесь), вы можете привязать к stop событие вместо change, Что-то вроде этого:

$("#yourSlider").bind("slidestop", calculateTotal).highlight();