從顯示器jquery動畫無第一次工作

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，第三次單擊動畫並更改以顯示：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

我覺得你應該給寬度「add_sit」，例如

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

這樣的jQuery知道元素的寬度。

Answer 3

您正在爲錯誤元素設置動畫，您應該爲沒有設置寬度的父級設置動畫效果，關閉元素始終是個好主意：

<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

Answer 4

你可以改變...

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