animate

by sum1

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="clickme"> Click Me</div>
<img id="myimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiWGXo4U6CCvNItlDYFgEQz4d3T-YjLj13nqUZ-crpAr3qMPx-" height="200" width="400" style=" position:relative; left:10px; " />
<p>animation complete</p>

CSS

div {
     margin:2px;
     background-color:royalblue;
     color:white;
     padding:10px;
     width:150px;
 }
 span {
     border:1px solid gray;
     padding:5px;
     background-color:yellow;
 }
 p {
     display:none;
     background-color:red;
     color:white;
     padding:20px;
     margin:10px;
     width:200px;
 }

JavaScript

$("#clickme").click(function () {
    $("#myimg").animate({
        opacity: 0.5,
        left: "+=50",
        height: "toggle",
    }, 1000, function msg() {
        $("p").toggle("slow");
    });
});