jQuery en utilisant ajouter avec des effets

Comment puis-je utiliser .append()avec des effets commeshow('slow')

Avoir des effets sur appendne semble pas fonctionner du tout, et cela donne le même résultat que la normale show(). Pas de transitions, pas d'animations.

Comment puis-je ajouter un div à un autre et avoir un effet slideDownou show('slow')dessus?

L'ajout d'effets sur l'ajout ne fonctionnera pas car le contenu affiché par le navigateur est mis à jour dès que la div est ajoutée. Donc, pour combiner les réponses de Mark B et Steerpike:

Style le div que vous ajoutez comme caché avant de l'ajouter réellement. Vous pouvez le faire avec un script CSS en ligne ou externe, ou simplement créer le div comme

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

Ensuite, vous pouvez enchaîner des effets à votre append ( démo ):

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

Ou ( démo ):

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

L'essence est la suivante:

1. Vous appelez 'append' sur le parent
2. mais tu veux appeler 'show' sur le nouvel enfant

Cela fonctionne pour moi:

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

ou:

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

Une autre façon de travailler avec des données entrantes (comme à partir d'un appel ajax):

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

Quelque chose comme:

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

devrait le faire?

Edit: désolé, erreur de code et a également pris en compte la suggestion de Matt.

Lorsque vous ajoutez au div, masquez-le et affichez-le avec l'argument "slow".

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

Définissez le div ajouté à masquer initialement via css visibility:hidden.

J'avais besoin d'un type de solution similaire, je voulais ajouter des données sur un mur comme Facebook, une fois posté, utiliser prepend()pour ajouter le dernier message en haut, cela pourrait être utile pour les autres.

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

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

le code dans ajax.php est

if (isset($_POST))
{

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


}

Pourquoi ne pas simplement cacher, ajouter, puis afficher, comme ceci:

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

Il est possible de montrer lisse si vous utilisez l'animation. Dans le style, ajoutez simplement "animation: show 1s" et toute l'apparence est décrite en images clés.

Dans mon cas:

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

vous pouvez ajuster votre css avec visibilité: caché -> visibilité: visible et ajuster les transitions etc transition: visibilité 1.0s;