2010-12-09 14 views
0

Ich füge eine Liste mit Jquery-Effekt-Transfer. Ich möchte den Text - "Element" nur erscheinen lassen, nachdem der Übertragungseffekt vollständig abgeschlossen ist. Irgendeine Idee? Danke,Fertig "Übertragung" vor dem Hinzufügen von Text

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

Antwort

1

Ja, aber vergessen Sie nicht über jQuery latenten;)
Hier ist ein kurzer Beispielcode, wie Sie einen Rückruf erreichen können .

$("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(); 
    }); 

}); 

Versuchen Sie folgendes: http://jsbin.com/oSuZoDaK/2/edit