Jquery Image Effect

Question

Hi i am making a banner copy of flash ad into Html5 using Jquery. Here is the link of what i want to convert Link and i have so far able to complete the text effects but only image animation is left and i need help in that one how to ad a image animation using Jquery so that image will work just within my defined container

Here is the fiddle link Fiddle code

<div id="mainContainer">        
    <div id="logo"  style="position:absolute;color:blue; font-size:30px;top:6px; left:6px">Sizmek</div><br />
        <div id="text1" style="position:absolute;">Striped Bag</div><br />
        <div id="text2" style="position:absolute;">$14</div><br />
        <div id="text3" style="position:absolute;">Sale $25</div><br />
    </div>




$(document).ready(function () {
        $("#text1").animate({ left: "+=30" }, 500);
        $("#text1").animate({ left: "-=20" }, 200);
        $("#text2").delay(300).animate({ left: "+=30" }, 500);
        $("#text2").animate({ left: "-=20" }, 200);
        $("#text3").delay(400).animate({ left: "+=30" }, 500);
        $("#text3").animate({ left: "-=20" }, 200);
    });


#mainContainer{
    width:298px;
    height:248px;
    border: 1px solid #5e6a71;
border-style:solid;
border-width:5px;
 border-color:#BACAE4;
}

#images img{
    position:absolute;
    top:60px;
    left:170px;
    border-radius: 50%;
    width:100px;
    height:100px;
    opacity: 0;
}

#headlineText p{
    width:165px;
    position:absolute;
    top:90px;
    left:120px;
    opacity: 0;
}

Thanks

Answer 1

I updated your fiddle here, you may need to fine tune some of the size and spacing: http://jsfiddle.net/Cbhsr/1/

The key is this code, it animates the width to something smaller. By setting only the width, we only have to animate on it. If the height and width of the image were both set through CSS, you'd have to animate both:

$("#introImg").animate({width: "100px"}, 1000);

Answer 2

It seems the image is animating from a bit past the bottom right, and from near to far..

I would overflow the container and animate the with translate3d:

css

#introImg{
        position:absolute;
        top:60px;
        left:170px;
        border-radius: 50%;
        width:100px;
        height:100px;
        opacity: 0;
        -webkit-transform: perspective(25px) translate3d(320px,320px,-50px); 
        transform:perspective(15px) translate3d(40px,40px,-50px);
        -webkit-transition:all 1s ease;
}

---

ofcourse that's the basic stuff, you need to add prefixes to support more browsers and tweek the numbers to get what you want :)

example: http://jsfiddle.net/suF4w/