CODEWITHSUNDEEP
javascriptanimationjquery-animate
Anish
Anish

Reputation: 2917

Jquery Animation Not Working

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.

Upvotes: 0

Views: 418

Answers (3)

DrStrangeLove
DrStrangeLove

Reputation: 11557

try setting position:absolute; to your #form.

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 237865

You have an extra }); at the end of your Javascript. This is illegal syntax and will stop the code working. See jsFiddle of your broken code.

However, if you remove that, it will work (jsFiddle).

Upvotes: 2

2hamed
2hamed

Reputation: 9047

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.

Upvotes: 1

Related Questions