transfer effects

by narensrinivasans

HTML

<nav>
    <ul>
        <li>Test1</li>
        <li>Test2</li>
        <li>Test3</li>
        <li>Test4</li>
    </ul>
</nav>
<div class="green"></div>

CSS

li {
    background: whitesmoke;
    border: 1px solid gray;
    cursor: pointer;
    color: grey;
    display: inline-block;
    padding: 4px 12px;
}
li:hover {
    border-color: black;
    color: black;
}
.green, .newlyAdded {
    color: green;
}
.red {
    color: red;
}
.note {
    color: grey;
    font-size: 16px;
    font-style: oblique;
    font-weight: normal;
    line-height: 16px;
    margin: 5px 0;
}
 div.green {
    width: 100px;
    height: 80px;
    background: green;
    border: 1px solid black;
    position: relative;
}
 .ui-effects-transfer {
    text-align: center;
}

JavaScript

$( "li" ).click(function() {
    $( this ).effect( "transfer", { to: $( "div.green" ) }, 1000 );
    $('.ui-effects-transfer').append('<img src="http://3.bp.blogspot.com/-IzuP4IMy6GY/UiLrIXaA8PI/AAAAAAAAJ_U/d6yq91owfq0/s200/google.png" height="80"/>')
});