<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>

$("#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

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

});

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

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);
});