getting a show effect to stop when another effect is started
Im having a bit of trouble with the bounce show effect from jquery ui.
To see what I mean, check out my development site. Anytime you modify a part in this computer builder, the rigth side gets updated. Right now its removing and adding list items. Problem is when click items too fast, the animation doesnt finish and the next item gets bumped lower and lower.
http://remote.xcsit.com:800/ReyniersAud ... modelId=16
Here is the code so far ( I know its messy, im new! )
-
$('input:radio').click(function(){
// Get variables from radio input that was clicked
total = Number($('input#basePrice').attr('value'));
upgradeCost = Number($(this).attr('upgradeCost'));
partId = $(this).attr('partId');
partTitle = $(this).attr('partTitle');
subTypeId = $(this).attr('subTypeId');
subTypeTitle = $(this).attr('subTypeTitle');
partTypeTitle = $(this).attr('partTypeTitle');
// Get total computer price by cycling through each checked box
$('input:radio:checked').each( function () {
cost = Number($(this).attr('cost'));
total = total + cost;
});
// To see which item was previously selected
$('input:radio.selected').each( function () {
var tempSubTypeId = $(this).attr('subTypeId');
if (tempSubTypeId == subTypeId) {
xSubTypeId = $(this).attr('subTypeId');
xPartId = $(this).attr('partId');
// Remove "selected" class from previously selected item.
$(this).removeClass('selected');
}
});
// Add "selected" class to currently selected item for future clicks
$(this).addClass("selected");
// Update right bar by removing previously checked item and adding new item.
$('#cartComputer dl ul li.subType' + xSubTypeId + '-part' + xPartId).remove();
$('#cartComputer dl ul').append('<li class="subType' + subTypeId + '-part' + partId + '"><dt>' + subTypeTitle + '</dt><dd>' + partTitle + '</dd></li>');
$('#cartComputer dl ul li.subType' + subTypeId + '-part' + partId).show('bounce',100);
$("#cartTotal").empty();
$("#cartTotal").append(formatCurrency(total));
});
Thanks alot guys!