jquery animation not working What to do?

Question

JavaScript

Hello!

<div class="login">
      <p><span class="glyphicon glyphicon-user"></span>login</p>
    </div>

.login {
    display: inline-block;
    width: 310px;
    height: 75px;
    background: $orange-str;
    float: right;
    .glyphicon-user {
      margin-right: 5%;
      margin-left : 15%;
      line-height: 75px;
    }
    p {
      font-size: 13px;
      font-family: Gotham;
      max-line-height: 75px;
      text-transform: uppercase;
      color: white;
      font-weight: 500;
      margin-right: 25px;
      text-align: left;
    }
  }
}

$(document).ready(function(){
$('.login').mouseover(function() {
$(".login p").animate({ text-align: "right" }, 1000);
} );
});


WHAT TO DO!?

Answer 1

First, text-align on the left should be textAlign,
second, it won't work there anyway, text-align won't animate...
stackoverflow.com/questions/6173327/animate-text-a...
here there is a solution