Question

I have a grid that when some cell is clicked, it blinks (thanks to cyclicFade jQuery plugin). I need to stop blink the cell when I click in another one. You can see the complete markup here.

$(".color").click(function () {
    $("#colorPicker").show();
    var number = $(this).attr('id').substr(1);
    var selected = $(this).attr('class');
    if (selected != 'color selected') {
        $('#n'+numero).css({
            'background-color':'#000',
            'border':'1px solid black',
            'margin-top':'0px',
            'margin-left':'0px'}).attr({'class': "color s"});
        var numeroCelda = Number(Number(numero)+1);
        $('#numero').replaceWith('<span id="numero">'+numeroCelda+'</span>');
     }
     $(this).cyclicFade({params: [
         {fadeout:1000, stayout:80, opout:0, fadein:1000, stayin:80, opin:1.0}]
     });    
     return numero;
});

How I could know what was the last element clicked and pass it to the function in order to switch cyclicFade off in that specific cell? Something like this:

$(lastclicked).cyclicFade(stop);

Thanks in advance.

Answer 1

In your click handler add:

$('.lastClicked').cyclicFade(stop);
$('.lastClicked').removeClass('lastClicked');
$(this).addClass('lastClicked');

It should be enough.

K