2010-12-09 39 views
0

J'ajoute une liste avec transfert d'effet jquery. Je veux faire apparaître le texte - "element" seulement après que l'effet de transfert est complètement terminé. Une idée? Merci,Terminer "transfert" avant d'ajouter du texte

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#add-li").click(function(){ 
     var NewLI = document.createElement("li"); 
     var ul = document.getElementById("ul"); 
     NewLI.innerHTML = 'element'; 
     ul.appendChild(NewLI); 

     $("#add-li").effect("transfer", { to: $("#ul li:last-child"), className: "ui-effects-transfer" }, "slow"); 
     })}) 
</script> 
<style type="text/css"> 
.ui-effects-transfer { border: 2px dotted #FFE600; } 
</style> 
</head> 

<body> 
<p><input type="button" id="add-li" value="add list" /></p> 
<br /><br /><br /><br /><br /><br /><br /> 
<p> 
    <div id="effect">Below this the list. 
    <ul id="ul"> 
    </ul> 
    </div> 
</p> 
</body> 

Répondre

1

Oui, mais ne pas oublier jQuery différé;)
Voici un exemple de code rapide comment vous pouvez obtenir un rappel .

$("div").click(function() { 
    var html1 = $(this).clone(); 
    var i = 1 - $("div").index(this); 
    $(this).effect("transfer", { to: $("div").eq(i) }, 1000).promise().done(function(){ 
    $("div").eq(i).html(html1.html()); 
    $(this).empty(); 
    }); 

}); 

Essayez ceci: http://jsbin.com/oSuZoDaK/2/edit