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>

これは最初のクリックではアニメーションせず、要素のみを表示します。2 回目のクリックで要素がアニメーション化され、display:nome に変更されます。3 回目のクリックで、アニメーション化され、display:inline-block に変更されます。等々。

うまくいかないのは最初だけ。これを解決するには？

4

4 に答える 4

1

1 つの方法は、display を none に設定する代わりに、ロード時にトグルを 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>親スパンを高さのままにしておくことができますが、それはインライン要素であることを覚えておいてdisplay:inline-blockくださいdisplay:block。

于 2012-07-05T18:14:55.270 に答える
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 に答える
0

たとえば、「add_sit」に幅を与える必要があると思います

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

したがって、jQuery は要素の幅を認識します。

于 2012-07-05T17:58:53.080 に答える