Question

I have made a feedback form.i put some jquery code to make it animate but it’s not working…

feedback_label is the button.when i click the buttom it should move to left by 150px.But it’s not moving.
HTML

<div id="form">
        <form>
        <label for="name" >Name<span class="imp">*</span>:</label><br/><input type="text" id="name" size="50"></input><br/>
        <label for="mail" class="l_label">Email Id<span class="imp">*</span>:</label><br/><input type="text" id="name"  size="50"></input><br/>
        <label for="website" class="l_label">Website<span class="imp">*</span>:</label><br/><input type="text" id="website"  size="50"></input><br/>
        <label for="feedback">Feedback<span class="imp">*</span>:</label><br/><textarea id="feedback" cols="36" rows="10" ></textarea><br/>
        <input type="submit" Value="Send" style="width:280px;height:100px;"/>
        </form>

    </div>
    <div id="feedback_label"><img src="feedback.png"/></div>

  <script type="text/javascript">

            $("#feedback_label").click(function(){
            $("#form").animate({"left": "+=150px"}, "slow");
        });




    </script>

CSS:

<style type="text/css">
    #form
    {

            border:1px solid black;
            width:300px;
            text-align:center;
            background-color:#353535;
            color:#fff;
            font-weight:bold;
            line-height:30px;
            margin-top:130px;
            float:left;
    }
    .imp
    {
        color:red;
    }
    #feedback_label
    {
        margin-top:230px;
        float:left;
        cursor:pointer;
    }
    textarea
    {
        resize:none;
    }

    </style>

Any Idea.

Answer 1

use margin-left instead of left.

or you could put your whole form inside another div and then animate the div element you just added.