149

.append()次のような効果でどのように使用できますかshow('slow')

に効果を与えることはまったく機能しappendていないようで、通常と同じ結果になりますshow()。トランジションもアニメーションもありません。

あるdivを別のdivに追加して、slideDownまたはshow('slow')に影響を与えるにはどうすればよいですか？

4

11 に答える 11

201

div が追加されるとすぐにブラウザーに表示されるコンテンツが更新されるため、追加に影響を与えても機能しません。したがって、Mark B と Steerpike の回答を組み合わせるには、次のようにします。

実際に追加する前に、追加する div を非表示としてスタイルします。インラインまたは外部CSSスクリプトを使用するか、divを次のように作成できます

<div id="new_div" style="display: none;"> ... </div>

次に、エフェクトを追加 ( demo )にチェーンできます。

$('#new_div').appendTo('#original_div').show('slow');

または (デモ):

var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');
于 2009-10-05T14:13:31.033 に答える
127

本質はこれです：

  1. 親で「追加」を呼び出しています
  2. しかし、新しい子で「show」を呼び出したい

これは私のために働く：

var new_item = $('<p>hello</p>').hide();
parent.append(new_item);
new_item.show('normal');

また：

$('<p>hello</p>').hide().appendTo(parent).show('normal');
于 2009-12-04T14:54:40.413 に答える
24

着信データを操作する別の方法 (ajax 呼び出しなど):

var new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();
于 2011-03-29T21:04:23.040 に答える
17

何かのようなもの：

$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow');

それをすべきですか？

編集：申し訳ありませんが、コードを間違えて、マットの提案も取り入れました。

于 2009-10-05T13:51:39.767 に答える
4

追加されたdivを、最初はcssで非表示にするように設定しますvisibility:hidden。

于 2009-10-05T13:50:12.720 に答える
3

私は同様の解決策を必要としていて、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>";


}
于 2012-07-26T01:27:35.843 に答える
1

次のように、単純に非表示にして、追加してから表示してみませんか。

<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>
于 2014-05-21T23:17:05.763 に答える