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/

  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.