jquery highlight applies a ton, how to avoid it

Question

I'm doing a website for reserving seats on a train. The form needs a calculator for the price to show the client a total amount while he/she is selecting service, quantity of passengers, etc.

To make more obvious the change in the total cost I used the jq highlight effect on the div, just to get more attention.

The problem is that I had it highlight when a slider slides, so if I pass from 0 to 56 (max seats on the train wagon) the highlight occurs 56 times.

Hopefully you could help out, or suggest a better idea.

Here's the code:

$(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();

});

The page is at http://www.micontrol.cl/~mvargas/wordpress/wp-transatacama/reservas-rapidas/form-reservas.php.

Answer 1

You need to stop triggering the change event on every slide step. Just trigger that on stop event. ex: http://jsbin.com/atolax/2