Question

我有一个小块，我想动画。但我希望它从一个隐藏的位置开始，如下：

<span class="add_sit" style="height:18px; display:none"><input name="situacao"></span>
<img src="plus-circle-blue.png" class="picto" id="lnk_add_sit">


<script>
$(function(){
    $('#lnk_add_sit').css('cursor','pointer').click(function(e) {
        e.preventDefault();
        $('.add_sit').animate({width:'toggle'}, 'fast');
    });
});
</script>

第一次点击时没有动画，只显示元素。在第二次单击时，动画元素并更改为显示：nome，在第三次单击动画并更改为display：inline-block;等等。

只有第一个不起作用。怎么解决这个问题？

Answer 1

一种方法是在加载时运行一次切换，而不是将显示设置为无：

<span class="add_sit" style="height:18px;"><input name="situacao"></span>
<img src="plus-circle-blue.png" class="picto" id="lnk_add_sit">


<script>
$(function(){
    var addSit = $('.add_sit');
    addSit.animate({width:'toggle'}, 0); // run it once to hide
    $('#lnk_add_sit').css('cursor','pointer').click(function(e) {
        e.preventDefault();
        addSit.animate({width:'toggle'}, 'fast');
    });
});
</script>

这是一个小提琴（只需单击损坏的图像图标）：

http://jsfiddle.net/c5h4D/

Answer 2

你可以改变......

<span class="add_sit" style="height:18px; display:none"><input name="situacao"></span>

...到......

<input name="situacao" class="add_sit" style="display: none">

......并以这种方式运行。

查看此Fiddle

您可以将父级跨度保留为高度，但请记住<span>是内联元素，高度属性不会影响它，除非您将其称为display:inline-block或display:block

Answer 3

我认为你应该给“add_sit”宽度，例如

<span class="add_sit" style="height:18px; display:none">

所以jQuery知道元素的宽度。

Answer 4

您正在制作错误元素的动画，您应该为输入设置动画而不是没有宽度设置的父级，并且关闭元素总是一个好主意：

<span class="add_sit" style="height:18px;">
    <input name="situacao" id="myInput" style="display: none;"/>
</span>
<img src="plus-circle-blue.png" class="picto" id="lnk_add_sit" />


<script type="text/javascript">
$(function(){
    $('#lnk_add_sit').css('cursor','pointer').click(function() {
        $('#myInput').animate({width: 'toggle'}, 'fast');
    });
});
</script>

FIDDLE

来自display none的Jquery animate不能第一次工作

4 个答案: