web-dev-qa-db-ja.com

エフェクト付きの追加を使用したjQuery

.append()のような効果でshow('slow')を使用するにはどうすればよいですか

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

あるdivを別のdivに追加して、それにslideDownまたはshow('slow')効果を持たせるにはどうすればよいですか？

jqueryanimationappendeffectsshow
137
David King

Divが追加されるとすぐにブラウザーに表示されるコンテンツが更新されるため、追加に影響はありません。したがって、マークBとステアパイクの答えを組み合わせるには：

実際に追加する前に、追加する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');
182
Matt Ball

本質はこれです：

  1. 親で「追加」を呼び出しています
  2. しかし、あなたは新しい子供に「ショー」を呼び出したい

これは私のために働く：

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

または：

$('<p>hello</p>').hide().appendTo(parent).show('normal');
120
Derek Illchuk

着信データを操作するときの別の方法（ajax呼び出しなど）：

var new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();
20
naspinski

何かのようなもの：

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

それをすべきですか？

編集：申し訳ありませんが、コードの間違いと、Mattの提案も機内に持ち込みました。

14
Mark Bell

Divに追加する場合、非表示および表示引数"slow"を使用します。

$("#img_container").append(first_div).hide().show('slow');
6
user3287594

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

4
Steerpike

私は同様の種類のソリューションを必要としていました。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>";


}
3
Karthik Sekar

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

<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>
1
Megamind Saiko

私の場合：

$("div.which-stores-content").append("<div class="content">Content</div>);
$("div.content").hide().show("fast");

visibility：hidden-> visibility：visibleでcssを調整し、トランジションなどを調整できます。transition：visibility 1.0s;

0
The Bumpaster

アニメーションを使用すると、スムーズに表示することができます。スタイルに「animation：show 1s」を追加するだけで、外観全体がキーフレームで記述されます。

0
NeedHate