jQuery en utilisant ajouter avec des effets


144

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?

Réponses:


195

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

5
était probablement le style en ligne, ajoutant une classe css comme "hidden" qui équivaut à afficher: aucun n'est .. "classier" (baddoom tsh);)
dmp

2
Cela ne fonctionnera pas. Lorsque vous utilisez append, il renverra le original_div et non l'élément nouvellement ajouté. Vous appelez donc show sur le conteneur.
Vic

1
@Vic .append()ne prend même pas de chaîne de sélection. L'idée est toujours correcte cependant. Merci, mis à jour.
Matt Ball

La démo fonctionne parfaitement, mais elle suppose que le contenu existe - donc cela ne fonctionnera pas si vous générez le contenu, par exemple. tirant le contenu alt d'une image pour créer un titre ou une div ...
Drew Dello Stritto

124

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

2
J'ai essayé ces deux méthodes et cela ne fonctionne pas. Il n'y a pas d'effet de glissement fluide sur le contenu ajouté.
Chris22

'normal'n'est pas une chaîne appropriée pour la vitesse. laissez ce champ vide pour aucune transition (apparaît immédiatement). utilisez une chaîne 'fast'pendant 200 'slow'ms ou 600 ms. ou tapez n'importe quel nombre comme $("element").show(747)(= 747ms) pour définir votre propre vitesse. voir les documents et rechercher l'animation / la durée.
honk31

2
Avec effet slide: element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });
Kevin Grabher

J'aime garder la partie cachée du modèle
lilalinux

23

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

15

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.


1
Je ne sais pas si cela faire ce qu'il veut, mais si oui, vous aviez chaîne les fonctions: $('#divid').append('#newdiv').hide().show('slow').
Matt Ball

Ça marche; le bit #newdiv est faux et vous avez raison, vous pouvez les enchaîner. J'ai modifié ma réponse maintenant.
Mark Bell

8

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

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

L'événement hide and show s'applique au #img_container et non au first_div, vous devriez utiliser appendTo
JesuLopez

4

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


3

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


}

1

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>

0

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.


0

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;

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.