jQuery przy użyciu dołączania z efektami

Jak mogę używać .append()z efektami takimi jakshow('slow')

appendWydaje się, że działanie na w ogóle nie działa i daje taki sam wynik, jak normalnieshow() . Żadnych przejść, żadnych animacji.

Jak mogę dołączyć jeden element div do drugiego i mieć na niego wpływ slideDownlub show('slow')?

Wpływ na dołączanie nie zadziała, ponieważ zawartość wyświetlana w przeglądarce jest aktualizowana natychmiast po dołączeniu elementu div. Tak więc, aby połączyć odpowiedzi Marka B i Steerpike:

Styl dołączanego div jako ukrytego, zanim faktycznie go dołączysz. Możesz to zrobić za pomocą wbudowanego lub zewnętrznego skryptu CSS lub po prostu utworzyć element div jako

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

Następnie możesz połączyć efekty do swojego dodatku ( demo ):

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

Lub ( demo ):

var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');

Istota jest taka:

1. Wzywasz „dołącz” do rodzica
2. ale chcesz nazywać nowe dziecko „pokaż”

To działa dla mnie:

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

lub:

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

Inny sposób podczas pracy z przychodzącymi danymi (np. Z wywołania AJAX):

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

Coś jak:

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

powinno to zrobić?

Edycja: przepraszam, pomyliłem się w kodzie i wziąłem też na pokład sugestię Matta.

Kiedy dołączasz do elementu div, ukryj go i pokaż z argumentem "slow".

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

Ustaw dołączony element div, aby był początkowo ukryty za pomocą css visibility:hidden.

Potrzebowałem podobnego rozwiązania, chciałem dodać dane na ścianie, takiej jak facebook, po opublikowaniu, użyć prepend()do dodania najnowszego postu na górze, pomyślałem, że może być przydatny dla innych.

$("#statusupdate").submit( function () {    
          $.post(
           'ajax.php',
            $(this).serialize(),
            function(data){

                $("#box").prepend($(data).fadeIn('slow'));                  
                $("#status").val('');
            }
          );
           event.preventDefault();   
        });   

kod w ajax.php to

if (isset($_POST))
{

    $feed = $_POST['feed'];
    echo "<p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>";


}

Dlaczego po prostu nie ukryjesz, nie dołączysz, a potem nie pokażesz, w ten sposób:

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

Możliwe jest pokazanie płynności, jeśli używasz animacji. W stylu wystarczy dodać „animacja: pokaż 1s”, a cały wygląd opisz w klatkach kluczowych.

W moim przypadku:

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

możesz dostosować swój css z widocznością: ukryty -> widoczność: widoczny i dostosować przejścia itp. przejście: widoczność 1.0s;