web-dev-qa-db-fra.com

jQuery utilisant append avec des effets

Comment utiliser .append() avec des effets tels que show('slow')

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

Comment puis-je ajouter une div à une autre et avoir un effet slideDown ou show('slow')?

jqueryanimationappendeffectsshow
137
David King

Avoir des effets sur append 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 de la div que vous ajoutez en tant que masqué avant de l'ajouter réellement. Vous pouvez le faire avec un script CSS intégré ou externe, ou simplement créer le div en tant que

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

Ensuite, vous pouvez chaî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');
182
Matt Ball

L'essence est la suivante:

  1. Vous appelez 'append' sur le parent
  2. mais vous voulez 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');
120
Derek Illchuk

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

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

Quelque chose comme:

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

devrait le faire?

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

14
Mark Bell

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

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

Définissez le div ajouté pour être caché initialement via css visibility:hidden.

4
Steerpike

J'avais besoin d'un type de solution similaire, je voulais ajouter des données sur un mur comme Facebook, lorsque posté, utilisez prepend() pour ajouter le dernier message en haut, cette pensée pourrait être utile pour d'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>";


}
3
Karthik Sekar

Pourquoi ne pas simplement cacher, ajouter, puis montrer, 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>
1
Megamind Saiko

Dans mon cas:

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

vous pouvez ajuster vos css avec visibilité: masqué -> visibilité: visible et ajuster les transitions, etc. transition: visibilité 1.0s;

0
The Bumpaster

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

0
NeedHate