从显示器jquery动画无第一次工作

我有一个小块，我想动画。但我希望它从隐藏位置开始，如下所示：从显示器jquery动画无第一次工作

<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，第三次单击动画并更改以显示：inline-block;等等。

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

来源

2012-07-05 jaclerigo

一种方法是负载，而不是设置显示运行一次切换到无：

<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-05 18:01:11 Zevan

不错;）它的工作！ – jaclerigo 2012-07-05 18:06:18

大家都知道，图像没有'alt'属性，所以它在Firefox中将会完全空白。 – honyovk 2012-07-05 18:24:21

我觉得你应该给宽度“add_sit”，例如

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

这样的jQuery知道元素的宽度。

来源

2012-07-05 17:58:53

增加宽度：150px，但它没有奏效。同样的行为。 – jaclerigo 2012-07-05 18:01:10

您正在为错误元素设置动画，您应该为没有设置宽度的父级设置动画效果，关闭元素始终是个好主意：

<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

来源

2012-07-05 18:07:49 adeneo

你可以改变...

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

来源

2012-07-05 18:14:55 honyovk

从显示器jquery动画无第一次工作

回答

相关问题