回答:
ブラウザに表示されるコンテンツは、divが追加されるとすぐに更新されるため、追加に影響を及ぼしません。したがって、Mark Bの回答とSteerpikeの回答を組み合わせるには:
実際に追加する前に、追加するdivを非表示にスタイル設定します。インラインまたは外部のCSSスクリプトでそれを行うか、次のようにdivを作成することができます
<div id="new_div" style="display: none;"> ... </div>
次に、エフェクトをチェーンに追加して追加できます(デモ)。
$('#new_div').appendTo('#original_div').show('slow');
または(デモ):
var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');
.append()
は、セレクター文字列は含まれません。アイデアはまだ正しいです。ありがとう、更新されました。
本質はこれです:
これは私にとってはうまくいきます:
var new_item = $('<p>hello</p>').hide();
parent.append(new_item);
new_item.show('normal');
または:
$('<p>hello</p>').hide().appendTo(parent).show('normal');
element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });
何かのようなもの:
$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow');
それをすべきですか?
編集:申し訳ありませんが、コードに誤りがあり、Mattの提案も取り入れました。
$('#divid').append('#newdiv').hide().show('slow')
。
私は同様の種類のソリューションを必要としていて、facebookのような壁にデータを追加したかった、投稿されたときprepend()
に、最新の投稿を上に追加するために使用しました。
$("#statusupdate").submit( function () {
$.post(
'ajax.php',
$(this).serialize(),
function(data){
$("#box").prepend($(data).fadeIn('slow'));
$("#status").val('');
}
);
event.preventDefault();
});
ajax.phpのコードは
if (isset($_POST))
{
$feed = $_POST['feed'];
echo "<p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>";
}
次のように、単に非表示にして、追加してから表示してみませんか。
<div id="parent1" style=" width: 300px; height: 300px; background-color: yellow;">
<div id="child" style=" width: 100px; height: 100px; background-color: red;"></div>
</div>
<div id="parent2" style=" width: 300px; height: 300px; background-color: green;">
</div>
<input id="mybutton" type="button" value="move">
<script>
$("#mybutton").click(function(){
$('#child').hide(1000, function(){
$('#parent2').append($('#child'));
$('#child').show(1000);
});
});
</script>