javascript - FadeIn all Elements except this -

i little confused following example: solely want overlay td elements except 'this', invert happening. not hovered td shall overlayed, others. can possibly me?

$('td').hover( function() { var overlay = $('<div class="overlay">' + '</div>').hide().fadein(500); $(this).find('.td-hack').append(overlay) }, function() { $(this).find('.overlay').fadeout(500); } ); 

i built current code on jfiddle: http://jsfiddle.net/ebv2c/3/

thank time, cheers

i'd suggest:

$('td').hover(         function () {         var overlay = $('<div />', {'class' : 'overlay'});         /* looking @ sibling elements of current 'td',            explicitly excludes current 'td'; looking            within 'td' elements '.td-hack' elements,            iterating on 'each()' method: */         $(this).siblings('td').find('.td-hack').each(function(){             /* appending clone of overlay element (otherwise                appended, on first iteration ,                subsequently moved, hiding it, fading in: */             $(this).append(overlay.clone().hide().fadein(500));         });     },     function () {         $(this).siblings('td').find('.overlay').fadeout(500);     }); 

js fiddle demo.

or, differently:

$('td').hover(     function () {         var overlay = $('<div />', {             'class': 'overlay'         });         /* above, not using 'each()', instead passing            anonymous function 'append()': */         $(this).siblings('td').find('.td-hack').append(function(i){             return overlay.clone().hide().fadein(500);         });     },     function () {         $(this).siblings('td').find('.overlay').fadeout(500);     }); 

js fiddle demo.

to mask cells (or append overlay cells) within whole table other this node:

$('td').hover(     function () {         var overlay = $('<div />', {'class' : 'overlay'});         $(this).closest('table').find('td').not(this).find('.td-hack').each(function(){             $(this).append(overlay.clone().hide().fadein(500));         });     },     function () {         $(this).closest('table').find('td .overlay').fadeout(500);     }); 

js fiddle demo.

or:

$('td').hover(     function () {         var overlay = $('<div />', {             'class': 'overlay'         });         $(this).closest('table').find('td').not(this).find('.td-hack').append(function(i){             return overlay.clone().hide().fadein(500);         });     },     function () {         $(this).closest('table').find('td .overlay').fadeout(500);     }); 

js fiddle demo.

and, finally, (for modern/up-to-date/standards-compliant browsers), addclass() solution, using following css:

td {     /* changes follow: */     -moz-transition: 0.4s linear;     -ms-transition: 0.4s linear;     -o-transition: 0.4s linear;     -webkit-transition: 0.4s linear;     transition: 0.4s linear; } .td-hack {     /* no changes here */ }  td.transparency {     /* added this: */     opacity: 0.4;     -moz-transition: 0.4s linear;     -ms-transition: 0.4s linear;     -o-transition: 0.4s linear;     -webkit-transition: 0.4s linear;     transition: 0.4s linear; } 

and jquery:

$('td').hover(     function () {        $(this).closest('table').find('td').not(this).addclass('transparency');     },     function () {         $(this).closest('table').find('td.transparency').removeclass('transparency')     }); 

js fiddle demo.

references:

• addclass().
• append().
• clone().
• closest().
• fadein().
• fadeout().
• find().
• hide().
• not().
• removeclass().
• siblings().