2015-08-09 284 views
0

我想在頁面加載時自動使用jQuery動畫標誌。首先,圖像需要縮小,然後放大,然後變成不同的圖像。如何用jQuery做到這一點?請幫幫我。這裏是我的代碼:帶放大和縮小的jQuery動畫

$(document).ready(function() { 
 
\t \t \t 
 
\t \t \t $("#minion").animate({ 
 
\t \t \t \t height: '50%', 
 
\t \t \t \t width: '50%' 
 
\t \t \t }, 3000, 
 
\t \t \t function() { 
 
\t \t \t \t $("#minion").animate({ 
 
\t \t \t \t \t opacity: 0.5 
 
\t \t \t \t }, 1000, 
 
\t \t \t \t function() { 
 
\t \t \t \t \t $("#logo").html($(".hiddendiv img, .hiddendiv div").clone()); 
 
\t \t \t \t }); 
 
\t \t \t }); 
 

 
\t \t });
.hiddendiv { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="logo"> 
 
    <img id="minion" src="images/logo.png" /> 
 
</div> 
 
      <div class="hiddendiv"> 
 
       <img src='images/logo-small.png' /> 
 
       <div>complete transformation</div> 
 
      </div>

感謝

+0

我已經試過這樣。 $(文件)。就緒(函數(){。 \t \t $( 「#標誌IMG」)動畫({寬度: 「50%」,高度: 「50%」}, '慢'); \t \t} ); –

+0

我也試過這個。但添加此代碼後,圖像未顯示。 $( 「#標誌IMG」)切換(函數(){ \t \t \t \t $(本).animate({寬度: 「50%」}, '慢'); \t \t \t}。,()的函數{ \t \t \t \t $(本).animate({寬度: 「20%」}, '慢'); \t \t \t}); –

+0

可能會幫助你http://jsfiddle.net/d7UjD/9/ – django

回答

1

你可以這樣做與此琴jsfiddle.net/d7UjD/9

<img id="zoomimg" src="http://www.google.com/images/srpr/logo3w.png" 
width="144" height="48" border="0" /> 
$(document).ready(function(){ 
    $('#zoomimg').css("cursor","pointer"); 
    $('#zoomimg').animate({width: "50%", height: "50%"}, 'slow'); 

    setTimeout(function() { 
    $('#zoomimg').animate({width: "28%"}, 'slow'); 
    }, 1000); 
}); 
+0

謝謝。這在一定程度上幫助了我。 –