Jquery vs IE in dark alley - round 1 (slideup & slidedown)

Question

I feel like I'm taking crazy pills. About to lose my mind solving the issue at hand but ultimately IE7 does not use jquery 'slideDown' and 'slideup' function as it should.

All other browsers work. My initial theory is the issue lying with the .focus (since ie does not recognize). When i switch the function to .click, it still does not function however.

Please save my life tonight.

<script type="text/javascript">
$(function()
{
    $("#message").click(function() {
        $(this).animate({"height": "85px",}, "fast" );
        $("#button_block").slideDown("fast");
        return false;
    });

    $("#cancel").click(function() {
        $("#message").animate({"height": "30px",}, "fast" );
        $("#button_block").slideUp("fast");
    return false;
    });

    $("#submit").click(function() {
        $("#message").animate({"height": "30px",}, "fast" );
        $("#button_block").slideUp("fast");
    return false;
    }); 

});

</script>

HTML snippet requested

<div id="shout"></div>


<form method="post" action="shout.php">
   <textarea id="message" name="message" class="message" value="enter text here"></textarea>
                <div id="button_block" style="padding:0 0 15px;">
                    <input type="submit" id="submit" value="Submit"/>
                    <input type="submit" id="cancel" value="Cancel" />
                </div>
</form>

additionally, the 'shoutbox' created above this file does not work in ie7 either (although works just fine in any other browser). Code for it is:

<script type="text/javascript">
$(function() {

    refresh_shoutbox();
    setInterval("refresh_shoutbox()", 15000);

    $("#submit").click(function() {
        var name    = $("#name").val();
        var message = $("#message").val();
        var data            = 'name='+ name +'&message='+ message;

        $.ajax({
            type: "POST",
            url: "shout.php",
            data: data,
            success: function(html){
                $("#shout").slideToggle(500, function(){
                    $(this).html(html).slideToggle(500);
                    $("#shout").val("");
                });
          }
        });    
        return false;
    });
});

function refresh_shoutbox() {
    var data = 'refresh=1';

    $.ajax({
            type: "POST",
            url: "shout.php",
            data: data,
            success: function(html){
                $("#shout").html(html);
            }
        });
}

</script>

Answer 1

I seem to remember IE7 having issues with trailing commas on key value pairs. I would try removing the extra commas as see if it helps.

from:

$(this).animate({"height": "85px",}, "fast" );

to:

$(this).animate({"height": "85px"}, "fast" );

Answer 2

Have you tried running the slideUp/slideDown as a callback from the animate method?

For example:

$("#message").click(function() {
        $(this).animate({"height": "85px",}, "fast", function() {
          $("#button_block").slideDown("fast");
        });        
        return false;
});

It's possible IE is having trouble because the height is not being taken up when the slideDown/Up is called.