追加と効果を使用したjQuery


144

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

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

どのように私は別のdiv要素を追加し、持つことができるslideDownか、show('slow')それに影響を?

回答:


195

ブラウザに表示されるコンテンツは、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');

5
おそらくインラインスタイルであり、表示に相当する「hidden」のようなcssクラスを追加します。noneis .. "classier"(baddoom tsh);)
dmp

2
これは機能しません。追加を使用すると、新しく追加された要素ではなく、original_divが返されます。つまり、実際にはコンテナでshowを呼び出しています。
Vic

1
@Vicに.append()は、セレクター文字列は含まれません。アイデアはまだ正しいです。ありがとう、更新されました。
マットボール

デモは完全に機能しますが、コンテンツが存在すると想定しているため、コンテンツを生成している場合は機能しません。画像のaltコンテンツをプルしてタイトルまたはdivを作成します...
Drew Dello Stritto 2013年

124

本質はこれです:

  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');

2
私はこれらの両方の方法を試しましたが、うまくいきません。追加されたコンテンツに滑らかなスライド効果はありません。
Chris22 2013年

'normal'速度を表す適切な文字列ではありません。遷移しない場合は空白のままにします(すぐに表示されます)。'fast'200msまたは'slow'600msの文字列を使用します。または、$("element").show(747)(= 747ms)のような数値を入力して、独自の速度を定義します。ドキュメントを見て、アニメーション/長さを探してください。
honk31 14

2
スライド効果あり: element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });
Kevin

テンプレートの非表示部分を除外するのが好き
lilalinux

23

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

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

15

何かのようなもの:

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

それをすべきですか?

編集:申し訳ありませんが、コードに誤りがあり、Mattの提案も取り入れました。


1
それで彼の望みどおりの結果が得られるかどうかはわかりませんが、そうであれば、関数を連鎖させます$('#divid').append('#newdiv').hide().show('slow')
マットボール

それは機能します。#newdivビットは間違っていますが、あなたの言うとおり、チェーンすることができます。回答を編集しました。
Mark Bell、

8

divに追加するときは、それ表示にして、引数とともに表示します"slow"

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

非表示および表示イベントは、first_divではなく#img_containerに適用されます。appendToを使用する必要があります
JesuLopez


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>";


}

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>

0

アニメーションを使えば滑らかに見せることができます。スタイルに「animation:show 1s」を追加するだけで、外観全体がキーフレームに記述されます。


0

私の場合:

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

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.