broken animated background

broken animated background

    Hello. I am using jQueryUI's animate() function and jQueryUI redmond theme CSS file in my page.
    I tried to animate a div to a red background. But only the upper half of the div went red. (See the attachment)

    Thanks is advance for any explanation
    Tested in IE8 & FF3.6 & Safari 5.

    PS: removing the jQueryUI theme file or adding a 'useless' "#targetdiv {background:transparent}" to stylesheet will solve the problem but I can't tell why they work.

    here is my code:
    2. <!DOCTYPE html>
    3. <html>
    4.     <head>
    5.         <link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.8.custom.css"/>
    6.         <style type="text/css">
    7.             .kb-anikey1{} .kb-anikey2{} #anikey h3 { margin:0; padding: 0.4em; text-align:
    8.             center; } #anikey { width:240px; padding:0.4em; } #anikey p { }
    9.         </style>
    10.     </head>
    11.     <body>
    12.         <div id="anikey" class="ui-widget-content ui-corner-all">
    13.             <h3 class="ui-widget-header ui-corner-all">
    14.                 animate
    15.             </h3>
    16.             <p>
    17.                 Lorem ipsum dolor 3 sit amet, consectetur adipiscing elit. Proin in elit
    18.                 elit, a egestas orci. Vivamus semper felis ipsum. Vestibulum ante ipsum
    19.                 primis in
    20.             </p>
    21.         </div>
    22.         <script src="../js/jquery-1.4.2.js"></script>
    23.         <script src="../js/jquery-ui-1.8.custom.min.js"></script>
    24.         <script>
    25.             $(document).ready(function() {
    26.                 $("#anikey").animate({
    27.                     backgroundColor: '#aa0000',
    28.                     color: '#1e4ffc',
    29.                     width: 500
    30.                 }, 2000);
    31.             });
    32.         </script>
    33.     </body>
    34. </html>

      • Topic Participants

      • z089