CSS Class Based Animation
This code attempts to use JavaScript to animate a CSS class onto an element
NOTE: This API required YUI.
<![CDATA[
<script src="../../../YUI/yahoo.js" type="text/javascript"></script>
<script src="../../../YUI/event.js" type="text/javascript"></script>
<script src="../../../YUI/dom.js" type="text/javascript"></script>
<script src="../../../YUI/animation.js" type="text/javascript"></script>
<link href="classAnim.css" type="text/css" rel="stylesheet" />
<script src="classAnim.js" type="text/javascript"></script>
<script>
YAHOO.util.Event.onAvailable("TestClassAnim", function(){
var anim = new YAHOO.mozmonkey.ClassAnim("TestClassAnim");
var start = 0;
YAHOO.util.Event.addListener("TestClassAnim", "mouseover", function(){
anim.addClass("classAnimHover");
});
YAHOO.util.Event.addListener("TestClassAnim", "mouseout", function(){
anim.removeClass("classAnimHover");
});
YAHOO.util.Event.addListener("TestClassAnim", "click", function(){
if(start == 0){
start = 1;
anim.addClass("classAnim2");
}
else{
start = 0;
anim.removeClass("classAnim2");
}
});
});
</script>
]]>
Class Animated Button (click me)