Finish "transfer" before adding text
I am adding a list with jquery effect transfer. I want to make the text - "element" appear only after the transfer effect is completely finished. Any idea? Thanks,
<script type="text/javascript">
$(document).ready(function(){
$("#add-li").click(function(){
var NewLI = document.createEle开发者_StackOverflowment("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>
Yes, but don't forget about jQuery deferred ;)
Here is a quick sample code how you can achieve a callback.
$( "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();
});
});
Try this: http://jsbin.com/oSuZoDaK/2/edit
That sucks! It seems that the effect you are using doesn't have option to callback. http://docs.jquery.com/UI/Effects/Transfer
This one has got callback http://api.jquery.com/animate/
More examples about callback http://api.jquery.com/slideDown/
加载中,请稍侯......
精彩评论