2010-03-12 03:18:34 +00:00
<!DOCTYPE html>
2009-03-18 10:13:09 +00:00
< html lang = "en" >
< head >
2010-03-12 03:18:34 +00:00
< meta charset = "UTF-8" / >
2009-03-18 10:13:09 +00:00
< title > Animate Visual Test : Animate color hex< / title >
< link rel = "stylesheet" href = "../visual.css" type = "text/css" / >
2010-02-16 01:38:23 +00:00
< link rel = "stylesheet" href = "../../../themes/base/jquery.ui.all.css" type = "text/css" >
2010-11-12 14:19:26 +00:00
< script type = "text/javascript" src = "../../../jquery-1.4.4.js" > < / script >
2009-09-17 10:39:12 +00:00
< script type = "text/javascript" src = "../../../ui/jquery.effects.core.js" > < / script >
2009-03-18 10:13:09 +00:00
< script type = "text/javascript" >
function hexFromRGB (r, g, b) {
var hex = [
r.toString(16),
g.toString(16),
b.toString(16)
];
$.each(hex, function (nr, val) {
if (val.length == 1) {
hex[nr] = '0' + val;
}
});
return hex.join('').toUpperCase();
}
function randomColorHex() {
return '#' + hexFromRGB(Math.floor(Math.random()*256), Math.floor(Math.random()*256), Math.floor(Math.random()*256));
}
$(function() {
$("#go").click(function() {
$("#animate-color").stop().animate({ color: randomColorHex() }, "fast");
});
})
< / script >
< style type = "text/css" >
#animate-color { width: 250px; height: 100px; color: gray; }
< / style >
< / head >
< body >
< div id = "animate-color" > Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.< / div >
< button id = "go" > Go< / button >
< / body >
< / html >