animate

by prabhu5013

HTML

<div id="tt">fsgfgdfgdfgfdgfdgfdg
    <ul class="nav">
        <li class="nav-item1">1111111<a href=""></a>

        </li>
        <li class="nav-item2">2222222222<a href=""></a>

        </li>
        <li class="nav-item3">333333333<a href=""></a>

        </li>
        <li class="nav-item4">4444444444<a href=""></a>

        </li>
    </ul>
</div>

CSS

div {
    background-color: green;
    width: 200px;
    height: 200px;
    position: absolute;
    color:white;
}
}

JavaScript

(function () {
    $("#tt").on("click", function () {
        $(this)
            .animate({
            'top': '100'
        })
            .animate({
            'left': '100'
        }, {
            queue: true
        })
            .find('li')
            .css('color', 'red')
            .end()
            .find('li.nav-item3')
            .css('font-size', '25px')
            .end()
            .css('font-size', '45px')
    });
})();