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

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

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

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

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.


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

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.


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


}

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>

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.


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;

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.