jQuery en utilisant append avec des effets
Comment puis-je utiliser .append() avec des effets comme show('slow')
Avoir des effets sur append ne semble pas fonctionner du tout, et ça 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') sur celui-ci?
10 réponses
Avoir des effets sur l'ajout ne fonctionnera pas car le contenu affiché par le navigateur est mis à jour dès que le div est ajouté. Donc, pour combiner les réponses de Mark B et Steerpike:
Stylez la div que vous ajoutez comme cachée 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 les 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:
- Vous appelez 'append' sur le parent
- 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');
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();
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.
Lorsque vous ajoutez à la div, cacher et montrer, 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, lorsqu'il est posté,utilisez prepend() pour ajouter le dernier message en haut, 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>";
}
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, il suffit d'ajouter "animation: show 1s" et toute l'apparence discribe dans les 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 visibility: hidden - > visibility: visible et ajuster les transitions etc transition: visibility 1.0 s;