jQuery的圖像效果

Question

嗨，我正在使用Jquery將Flash廣告的橫幅廣告復制到Html5中。 這是我要轉換的鏈接 ，到目前為止，我已經能夠完成文本效果，但是只剩下圖像動畫，因此我需要幫助，即如何使用Jquery投放圖像動畫，以便圖像可以在我定義的容器

這是小提琴鏈接小提琴代碼

<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;
}

謝謝

Answer 1

我在這里更新了小提琴，您可能需要微調一些大小和間距： http : //jsfiddle.net/Cbhsr/1/

關鍵是這段代碼，它將寬度設置為較小的動畫。 通過僅設置寬度，我們僅需對其進行動畫處理。 如果圖像的高度和寬度都是通過CSS設置的，則必須同時設置兩者的動畫：

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

Answer 2

圖像似乎從右下角開始，並且從近到遠。

我會溢出容器，並為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;
}

---

當然，這是最基本的東西，您需要添加前綴以支持更多瀏覽器，並增加數字以獲取所需的內容：）

例如： http ： //jsfiddle.net/suF4w/