Question

I’ve a rare situation here and I need some ideas, I just prove a lot of combinations but programming is not random!

I’ve a table with a border = 1px. Also I’ve a lot of <td> and inside of them, one image.
Basically my idea is that when the user clicks on one image (img), all images AND the table border be “fade out”, EXCEPT for the clicked image. So I’ve prove a lot of combinations, and when img disappears, borders not, or nothing disappears, or everything disappears, or the callback doesn’t work. My best approach until now is this one:

Supose the following html:

<table id="entire">
<tr><td>
<table class="table1" border="1px">
<tr>
<td><img id="ebox"></td>
<td><img id="fbox"></td>
<td><img id="gbox"></td>
</tr>
</table>
</td></tr>
</table>

And supose the following JQuery:

    $("#entire").click(function (event) {

        $('.table1 img').animate({
            opacity: 0.3
            }, 500,
            function() {


        }); //close the animate

$('#' + event.target.id).animate({
            opacity: 0.9
            }, 500,
            function() {


        }); //close the animate

    });  //close the event click

I really prove with everything, with ParentNode and call the , and other options like take everything fade out and then fade on.

On the last instance, I know this can be done but I don’t know the way. My idea is that the table1 “fades out” EXCEPT the image clicked, and not after, but at the same time.

Any workaround will be treated as solution also, please comment, ask for more information or suggest before downvote. I really search on Google and I also try with “queue off, complete:” but doesn’t work.

UPDATE:

last approach:

$('.table1 img').not(event.target).animate({alpha: 0.3}, {
        duration: 1000,
    step: function() {
            $('.table1').css('border-color','rgba(0,0,0,'+this.alpha+')');
        }

});

Answer 1

jQuery UI allows color animations so with jQuery UI (or an appropriate part of it) installed, try this :

var $t = $("#entire table").on('click', 'img', function() {
    $(this).fadeIn(250);
    $t.animate('border-color', '#FFF').find('img').not(this).fadeOut(1000);
});

You will only see the border fade effect once unless some other piece of code resets it to its original color.

EDIT

.fadeTo() is probably better than fadeIn() / fadeOut(); as the faded images remain available to be clicked.

var $t = $("#entire table").on('click', 'img', function() {
    $(this).fadeTo(250, 1.0);
    $t.animate('border-color', '#FFF').find('img').not(this).fadeTo(1000, 0.2);
});