Question

$(document).ready(function(){
    $("input").click(function(){
        $("input").animate({left: '250px'});
    });
});

pre{
    background-color: #0099cc;
}

pre > b{
    float: left;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

pre > input{
    float:right;
}

<header>
    <pre><b>Hi , this is phani and you are seeing my portfolio.<b><input type="button" class="btn btn-success" name="works" value="works"></input></pre>
</header>
<script src="../js/jquery-2.2.0.js"></script>

当我在JQuery中应用hide()时，它正在运行，但是当我使用动画时，它无效。

Answer 1

在输入框中添加绝对位置并尝试：

<pre>
<b>Hi , this is phani and you are seeing my portfolio.<b>
<input type="button" style="position:absolute;" class="btn btn-success" name="works" value="works"/>
</pre>

Answer 2

要使top/right/bottom/left属性生效，您必须使用该元素position: relative/absolute/fixed。

因此，由于您未使用position属性，因此可以为margins（在您的情况下为margin-left）设置动画：

$(document).ready(function() {
  $("input").on('click', function() {
    $("input").animate({
      marginLeft: '250px'
    });
  });
});

pre {
  background-color: #0099cc;
}
pre > b {
  float: left;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
pre > input {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <pre><b>Hi , this is phani and you are seeing my portfolio.<b><input type="button" class="btn btn-success" name="works" value="works"></input></pre>
</header>

此外，您的HTML 无效。使用W3 validator检查您的标记。

jquery animate（）不起作用

2 个答案: