advanced code snippet search

Posted By

cfleschhut on 04/23/10


Tagged

javascript opacity interface mootools fading


Versions (?)

MooTools: Focus Single Element (Siblings Fade)

 / Published in: JavaScript
 

URL: http://jsfiddle.net/5mfdt/

via http://davidwalsh.name/opacity-focus

Expand | Embed | Plain Text 
  1. <div class="fade">
  2.     <img id="pic1" src="http://dummyimage.com/100x100" alt="" />
  3.     <img id="pic2" src="http://dummyimage.com/100x100" alt="" />
  4.     <img id="pic3" src="http://dummyimage.com/100x100" alt="" />
  5.     <img id="pic4" src="http://dummyimage.com/100x100" alt="" />
  6. </div>
  7.  
  8.  
  9. $$("div.fade").each(function(container) {
  10.     container.getChildren().each(function(child) {
  11.         var siblings = child.getParent().getChildren().erase(child);
  12.         child.addEvents({
  13.             mouseenter: function() {
  14.                 siblings.set("tween", {
  15.                     duration: 400
  16.                 }).tween("opacity", 0.4);
  17.             },
  18.             mouseleave: function() {
  19.                 siblings.set("tween", {
  20.                     duration: 400
  21.                 }).tween("opacity", 1);
  22.             }
  23.         });
  24.     });
  25. });

Report this snippet  

You need to login to post a comment.