I've got a div in my app that is displayed each time my theme options panel is "saved".

The markup is...

<form method="post">

<?php
if ( $_REQUEST['saved']) { ?>
<div id="message" class="updated fade"><p>Sweet! The settings were saved :)</p></div>
<script type="text/javascript"> $('#message').delay(3000).fadeOut(3000);</script>
<?php }?>

This has the effect of showing the div (which is absolutely positioned to overlay the interface). I'm also using jQuery to fade the message offscreen after 3 seconds.

This works fine, however, when I add a bit of script to my jQuery chain (see the commented out block below), the message div is only visible when the jPicker popup appears.

$(function()
{

$("#carousel").jCarouselLite
(
    {
    btnNext: ".next",
    btnPrev: ".prev",
    visible: 6,
    speed: 700
    }
);

$('#carousel').show();

$('#myTheme').change
(
    function() 
    {
    var myImage = $('#myTheme :selected').text();
    $('.selectedImage img').attr('src','../wp-content/themes/myTheme/styles/'+myImage+'/screenshot.jpg');
    }
);

$('#carousel ul li').click
(
    function(e) 
    {
    var myOption = $(this).children('img').attr('title');
    $("#myTheme option[value='"+myOption+"']").attr('selected', 'selected');
    $("#myTheme").css('backgroundColor', '#A9A9A9').animate({backgroundColor: "#ffffff"}, 'slow');
    }
);

$('#carousel ul li').hover
(
    function(e) 
    {
    var img_src = $(this).children('img').attr('src');
    $('.selectedImage img').attr('src',img_src);  
    }
    ,function()
    {
    $('.selectedImage img').attr('src', '<?php echo $selectedThumb; ?>');
    }
);
 /*
$('#myTheme_sidebar_color').jPicker
(
    {},
    function(color) 
    { 
        $(this).val(color.get_Hex());
    },
    function(color) 
    { 
        $(this).val(color.get_Hex()); 
    }
);
*/
});