Advanced Search

MooTools: Focus Single Element (Siblings Fade)

/ Published in: JavaScript
Save to your folder(s)
via [http://davidwalsh.name/opacity-focus](http://davidwalsh.name/opacity-focus)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. });

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.