javascript - Why won't jQuery let me animate the background color of a div? -
i found animation example on w3schools.com:
<!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn1").click(function(){ $("#box").animate({height:"300px"}); }); $("#btn2").click(function(){ $("#box").animate({height:"100px"}); }); }); </script> </head> <body> <button id="btn1">animate height</button> <button id="btn2">reset height</button> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> </body> </html> however if try change animate background color instead of height, doesn't work. here code:
<!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn1").click(function(){ $("#box").animate({backgroundcolor:"#0000ff"}); }); $("#btn2").click(function(){ $("#box").animate({backgroundcolor:"#98bf21"}); }); }); </script> </head> <body> <button id="btn1">animate height</button> <button id="btn2">reset height</button> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> </body> </html> this jquery tutorial (http://jqueryui.com/animate/) makes seem should work, going wrong? thanks!!
jquery, itself, doesn't provide animation of color values. need plugin it. there several, including but not limited to jquery ui. search "jquery color animation" find options. here top 3 of writing:
Comments
Post a Comment