Find the right answer! The fade will take 250 milliseconds and change various styles when it completes.

Edit code and click me	Your Result (Some examples do not work in Google Chrome):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ var getPos = function (n) { return (Math.floor(n) * 90) + "px"; }; $("p").each(function (n) { var r = Math.floor(Math.random() * 3); var tmp = $(this).text(); $(this).text($("p:eq(" + r + ")").text()); $("p:eq(" + r + ")").text(tmp); $(this).css("left", getPos(n)); }); $("div").each(function (n) { $(this).css("left", getPos(n)); }) .css("cursor", "pointer") .click(function () { $(this).fadeTo(250, 0.25, function () { $(this).css("cursor", "") .prev().css({"font-weight": "bolder", "font-style": "italic"}); }); }); }); </script> <style> div, p { width:80px; height:40px; top:0; margin:0; position:absolute; padding-top:8px; } p { background:#fcc; text-align:center; } div { background:blue; } </style> </head> <body> <p>Wrong</p> <div></div> <p>Wrong</p> <div></div> <p>Right!</p> <div></div> </body> </html>
Edit the code above and click to see the result	www.xhtml.co.il - Try it yourself