Jquery slide and Margin

Question

I currently have a Jquery slide in place to slide in an error message.

$('form').submit(function(){
   var $emptyFields = $();
    $('form').find('input').each(function(){if($(this).val() == ""){$emptyFields.push(this)}});
    if($emptyFields.length != 0){
        $('form').find('input').css("border","");
        $("#error").show("slide", { direction: "down" }, 1000);
        return false;
    }else{
        return true;
    }
});

And Im centering the error message via the following css.

  #error {
    display: none;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    width: 24%;
  }

What happens though is that it slides it in then applies the css. Is there anyway around this ?

Answer 1

You could actually use slideDown() or slideToggle(), I've had css problems with show before, it behaves slightly differently.