1

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

<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>

这在第一次单击时不会动画，只显示元素。第二次单击时，动画元素并更改为 display:nome，第三次单击时动画并更改为 display:inline-block; 等等。

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

4

4 回答 4

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/

于 2012-07-05T18:01:11.563 回答
1

你可以改变...

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

...到...

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

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

看看这个小提琴

您可以保留父 span 的高度，但请记住这是一个内联元素，除非您告诉它是or <span>，否则 height 属性不会影响它。display:inline-blockdisplay:block

于 2012-07-05T18:14:55.270 回答
0

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

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

所以 jQuery 知道元素的宽度。

于 2012-07-05T17:58:53.080 回答
0

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

<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>​​​​​​​

小提琴

于 2012-07-05T18:07:49.550 回答