Jquery Animation не работает - PullRequest
       13

Jquery Animation не работает

0 голосов
/ 01 июня 2011

Я сделал форму обратной связи. Я поместил код jquery, чтобы сделать его анимированным, но он не работает ...

feedback_label - кнопка. Когда я нажимаю на кнопку, она должна переместиться влево на 150px. Но она не движется. 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>

Любая идея.

Ответы [ 3 ]

2 голосов
/ 01 июня 2011

У вас есть дополнительный }); в конце вашего Javascript. Это недопустимый синтаксис и остановит работу кода. См. JsFiddle вашего неработающего кода .

Однако, если вы удалите это, оно будет работать ( jsFiddle ).

1 голос
/ 01 июня 2011

используйте margin-left вместо left.

или вы можете поместить всю свою форму в другой элемент div, а затем анимировать элемент div, который вы только что добавили.

0 голосов
/ 01 июня 2011

попробуйте установить position:absolute; в # форму.

...