5

このコードを確認してください: http://jsfiddle.net/ZXN4S/1/

HTML:

<div class="input">
    <input type="text" size="50" id="test_input">
    <input type="submit" value="send" id="test_submit">
</div>

<ul>
    <li class="clear">
        <div class="comment">
           <div class="image">
            <img src="http://www.chooseby.info/materiale/Alcantara-Black_granito_nero_naturale_lucido_3754.jpg">
           </div>
           <div class="info">
             <div class="name">Name</div>
             <div class="text">text</div>
             <div class="timestamp">timestamp</div>
           </div>
        </div>
    </li>
</ul>

jQuery:

$(document).ready(function() {
    $("#test_submit").click(function() {
        $.post('/echo/json/', function(data) {
            last = $("ul li:first-child");
            new_line = last.clone();
            new_line.hide();
            last.before(new_line);
            new_line.slideDown('slow');
        });

        return false;
    });
});

入力フィールドにテキストを挿入して送信をクリックすると、私が話している問題が表示されます。滑り落ちるとき、スライドの高さが間違っていて、効果が醜いです。ただし、divを削除するinfoとうまく機能します。どうすれば修正できますか？

4

4 に答える 4

1

このトリックは問題を解決するようです：

ul li .info {
    float: right;
    width: 485px; // fixed width to the div
}
于 2011-11-20T01:30:12.073 に答える
1

問題は単純にレイアウト モデルです。ほとんどのブラウザーでは、overflow:hidden を追加して要素にレイアウトを与えることができます。

ul li .info {
  overflow: hidden;
}

それも解決します。オプションで幅を修正することもできますが、必須ではありません。

あなたが実際に求めていないボーナスのペダンティックなヘルプ:

デフォルトのイベントを防ぐために「return false」を使用しています。そのための関数があり、イベントがどのようにバブリングするかという点でより効率的です。イベントを関数に渡すだけで (任意の名前を使用できますが、わかりやすくするために「イベント」と呼びます)、次のようpreventDefault()に呼び出します。

$("#test_submit").click(function(event) {
  event.preventDefault()
// ... the rest of your code ... //
});
于 2011-11-20T03:46:55.630 に答える
1

設定:

ul li .info {
    float: left;
}

私のためにそれをしました（クロムでテスト済み）

于 2011-11-20T01:19:34.080 に答える
0

JS Fiddle で遊んだ後、これはトリックを行ったようです:

あなたのCSSでは、ul li .info { }

追加：height: 50px;

于 2011-11-20T01:08:58.210 に答える