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)


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.