jQuery usando anexar com efeitos


144

Como posso usar .append()com efeitos comoshow('slow')

Ter efeitos appendnão parece funcionar de maneira alguma, e dá o mesmo resultado que o normal show(). Sem transições, sem animações.

Como posso anexar um div a outro e ter um slideDownou show('slow')efeito sobre ele?

Respostas:


195

Ter efeitos no acréscimo não funcionará porque o conteúdo exibido pelo navegador é atualizado assim que a div é anexada. Então, para combinar as respostas de Mark B e Steerpike:

Denomine a div que você está anexando como oculta antes de realmente anexá-la. Você pode fazer isso com script CSS embutido ou externo ou apenas criar a div como

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

Então você pode encadear efeitos ao seu anexo ( demo ):

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

Ou ( demo ):

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

5
foi provavelmente o estilo em linha, adicionando uma classe css como "escondido" o que equivale a exibir: none é .. "classier" (baddoom TSH);)
DMP

2
Isso não vai funcionar. Quando você usa o acréscimo, ele retornará o original_div e não o elemento recém-anexado. Então você está realmente chamando show no contêiner.
Vic

1
@Vic por acaso .append()nem precisa de uma string seletora. A ideia ainda está correta. Obrigado, atualizado.
Matt Bola

A demonstração funciona perfeitamente, mas assume que o conteúdo existe - portanto, não funcionará se você estiver gerando o conteúdo, por exemplo. puxando conteúdo alt de uma imagem para criar um título ou div ...
Tirou Dello Stritto

124

A essência é esta:

  1. Você está chamando 'anexar' no pai
  2. mas você deseja chamar 'show' no novo filho

Isso funciona para mim:

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

ou:

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

2
Eu tentei de duas maneiras e não funciona. Não há efeito deslizante suave no conteúdo anexado.
precisa

'normal'não é uma sequência adequada de velocidade. deixe em branco para nenhuma transição (aparece imediatamente). use string 'fast'para 200ms ou 'slow'600ms. ou digite qualquer número como $("element").show(747)(= 747ms) para definir a própria velocidade. consulte os documentos e procure animação / duração.
honk31

2
Com efeito slide: element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });
Kevin Grabher 13/03/2015

Eu gosto de manter a parte oculta fora do modelo #
lilalinux

23

Outra maneira ao trabalhar com dados recebidos (como em uma chamada ajax):

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

15

Algo como:

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

deveria fazer isso?

Edit: desculpe, erro no código e levou a sugestão de Matt a bordo também.


1
Não tenho certeza se isso iria fazer o que quiser, mas se assim for, você cadeia funções: $('#divid').append('#newdiv').hide().show('slow').
Matt Bola

Isso funciona; o bit #newdiv está errado e você está certo, pode encadeá-los. Eu editei minha resposta agora.
Mark Bell

8

Quando você anexar ao div, escondê-lo e mostrá-lo com o argumento "slow".

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

A pele e mostra do evento se aplica ao #img_container e não no first_div, você deve usar appendTo
JesuLopez

4

Defina a div anexada como oculta inicialmente por meio de css visibility:hidden.


3

Eu estava precisando de um tipo semelhante de solução, queria adicionar dados em uma parede como o facebook, quando postado, use prepend()para adicionar o post mais recente no topo, o pensamento pode ser útil para outras pessoas.

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

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

o código no 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

Por que você simplesmente não esconde, acrescenta e mostra assim:

<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

É possível mostrar suavidade se você usar Animação. Com estilo, adicione "animation: show 1s" e toda a aparência aparece nos quadros-chave.


0

No meu caso:

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

você pode ajustar seu css com visibilidade: oculto -> visibilidade: visível e ajustar as transições etc transição: visibilidade 1.0s;

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.