Demo of Jquery transfer UI effects

Apply Transfer effects

First

Apply Transfer effects

Second

CSS


<style>
.msg{ 
position: absolute;
FONT-SIZE: 12px;
font-family: Verdana;
padding:10px;
width:150px;
height: 100px;
background-color: #f1f1f1;
}

.msg1{ 
position: absolute;
FONT-SIZE: 12px;
font-family: Verdana;
padding:10px;
width:150px;
height: 100px;
background-color: #ffff00;
}
.ui-effects-transfer {
    border: 5px dotted red;
  }
</style>

HTML

jquery


<script>
$(document).ready(function() {
$('#b1').click(function(){
$("#d1").effect( "transfer",{ to: $("#d2")} );
})
/////////
$('#b2').click(function(){
$("#d2").effect( "transfer",{ to: $("#d1")} );
})


})
</script>