jQuery przy użyciu dołączania z efektami

144

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

David King
źródło

Odpowiedzi:

195

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');
Matt Ball
źródło
5
był prawdopodobnie stylem wbudowanym, dodając klasę css taką jak „hidden”, co oznacza wyświetlenie: none is .. „classier” (baddoom tsh);)
dmp
2
To nie zadziała. Kiedy użyjesz append, zwróci on original_div, a nie nowo dodany element. Więc faktycznie wywołujesz program na kontenerze.
Vic
1
@Vic, jak to się dzieje .append(), nie przyjmuje nawet ciągu selektora. Pomysł jest jednak nadal poprawny. Dzięki, zaktualizowane.
Matt Ball,
Demo działa idealnie, ale zakłada, że ​​treść istnieje - więc nie zadziała, jeśli generujesz zawartość, np.
pobieranie
124

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');
Derek Illchuk
źródło
2
Wypróbowałem oba te sposoby i to nie działa. Nie ma efektu płynnego przesuwania dołączonej treści.
Chris22
'normal'nie jest odpowiednim ciągiem do szybkości. pozostaw to pole puste, aby uniknąć przejścia (pojawia się natychmiast). użyj łańcucha 'fast'przez 200 ms lub 'slow'600 ms. lub wpisz dowolną liczbę, na przykład $("element").show(747)(= 747 ms), aby zdefiniować własną prędkość. zobacz dokumentację i poszukaj animacji / czasu trwania.
honk31
2
Z efektem slajdu: element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });
Kevin Grabher
Lubię trzymać
ukrytą
23

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();
naspiński
źródło
15

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.

Mark Bell
źródło
1
Nie jestem pewien, czy to zrobi, co chce, ale jeśli tak, to bym łańcuch funkcje: $('#divid').append('#newdiv').hide().show('slow').
Matt Ball
To działa; bit #newdiv jest jednak zły i masz rację, możesz je połączyć. Zmieniłem teraz moją odpowiedź.
Mark Bell
8

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

$("#img_container").append(first_div).hide().show('slow');
Shubham Khatri
źródło
Zdarzenie ukryj i pokaż dotyczy #img_container, a nie na first_div, powinieneś użyć appendTo
JesuLopez
4

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

Steerpike
źródło
3

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


}
Karthik Sekar
źródło
1

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>
Megamind Saiko
źródło
0

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.

NeedHate
źródło
0

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;

The Bumpaster
źródło