Question

I’m playing around with a web site at the following address

http://jsfiddle.net/deltanovember/h63Vx/3/

The code for the submit button is as follows

<input class="ka-form-submit" type="submit" name="contact" value="Submit" />

What I don’t understand is how the rollover effect is achieved. In “old school” development this would have been done with onMouseOver or similar. However I don’t see the button linked to any JavaScript at all. I know that JavaScript is involved because when I remove the script files, the rollover stops working. I just can’t find the link.

Answer 1

A quick look under the hood with Firebug revealed that the opacity of the button is changed when the user mouses over the button:

opacity: 1;

is smoothly changed to:

opacity: .7;

Look at the karma.js file and you’ll see this under the section “Button hover”:

TTjquery(document).ready(function(){
    TTjquery(".ka_button, #ka-submit, #searchform #searchsubmit, .ka-form-submit, #mc_signup #mc_signup_submit, .fade-me")
        .hover(
            function(){
                TTjquery(this)
                    .stop()
                    .animate({opacity:0.7},250)
            }, 
            function(){
                TTjquery(this)
                    .stop()
                    .animate({opacity:1.0},250)
            }
        );
});