Packager compatible.
Update 1: Some optimizations made to underlying code, with suggestions made by arian.
Also, fixed an issue where all elements in a collection would morph back to the last element's style in the collection instead of its own.
This plugin is based off the Element.highlight function but with a slight twist.
Call this method on a collection of Elements to transition their color properties on mouseeneter/leave.
Notice: If the background color is transparent it will be set to white!
$$('.classOrSelector').multiHighlight( backgroundColor, foregroundColor, morphProps );
// Transitions current colors to supplied colors on mouseenter and back to original on mouseleave $$('.link1').multiHighlight('#eee','#000'); // Transitions ONLY the elements color property and applies Fx options to the transition $$('.link2').multiHighlight(null,'#eee', {duration:'short'}); // Transitions ONLY the elements background-color and applies Fx options to the transition $$('.link3').multiHighlight('#eee',null, {duration:'long'});
<div class="link-container"> <a class="link1" href="#">home</a> <a class="link1" href="#">about</a> <a class="link1" href="#">contact</a> <div class="clear-floats"></div> </div> <div class="link-container"> <a class="link2" href="#">home</a> <a class="link2" href="#">about</a> <a class="link2" href="#">contact</a> <div class="clear-floats"></div> </div> <div class="link-container"> <a class="link3" href="#">home</a> <a class="link3" href="#">about</a> <a class="link3" href="#">contact</a> <div class="clear-floats"></div> </div>
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus