jQuery en utilisant append avec des effets

Question

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

Effets ayant sur append ne semble pas fonctionner du tout, et il 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 slideDown ou show('slow') dessus?

Answer 1

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

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

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

Ensuite vous pouvez les effets de la chaîne à votre append (demo):

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

Or (demo):

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

Answer 2

Définissez la div ajoutée à masquer initialement à l'aide de la css visibility:hidden.

Answer 3

Quelque chose comme:

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

devrait le faire? Edit: désolé, erreur dans le code et a pris la suggestion de Matt à bord aussi.

Answer 4

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

Answer 5

une autre façon lorsque vous travaillez avec des données entrantes (comme à partir d'un appel ajax):

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

Answer 6

J'avais besoin d'un même type de solution, voulait ajouter des données sur un mur comme facebook, lorsque affiché, utilisez prepend() pour ajouter le dernier message sur le dessus, la pensée 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 en 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>"; 


} 

Answer 7

Pourquoi ne pas vous cacher simplement, append, 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> 

Answer 8

Lorsque vous ajoutez à la div, le cacher et montrer avec le argument "slow".

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

Answer 9

Il est possible de montrer lisse si vous utilisez Animation. Dans le style il suffit d'ajouter "animation: show 1s" et l'ensemble discribe apparence dans les images clés.

Answer 10

Dans mon cas:

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

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