2011-10-12 57 views
0

我想加載一個擴展div內的html文檔,我想動畫展開。 因爲它現在我只能設置一個高度,它動畫,然後只顯示其餘。動畫文件的高度jQuery

所以我想我想要它加載的內容,然後動畫,基本上它說300px它應該是我的HTML文檔的高度(這是不同的,因爲它是我的投資組合中的不同項目)。

box_project2 HTML在單獨的html文檔中,應該定義動畫高度。

鏈接到我的網站,在此可以通過點擊某些頂級項目來查看相應的問題。 http://richardhedberg.com/portfolionew/index.html#

$('.thumbs2').click(function() { 
    var idStr = ("project/" + $(this).attr('id')); 
    var newHeight = 0; 
    $('#show2').animate({ height: '300px', opacity: 0 }, function() { 
     $('#workp').fadeIn('fast'); 
     $.scrollTo('#gohere', 300); 

     $('#show2').load(idStr, function() { 
      newHeight = $('#box_project2').outerHeight(); 
      $(this).animate({ height: newHeight }, 300, function() { 
       $('#show2').delay(200).animate({ opacity: 1 }, 800); 
       $('#close2').css({ 'display': 'block', 'height': '25px' }); 
      }); 
     }); 
    }); 
}); 




     <div id="close2"> 
     </div> 
     <div id="show2"> 
      <div id="box_project2"> 
      </div> 
     </div> 


.workp { 
background:#fff; 
position:relative; 
z-index:999; 
margin-bottom:30px; 


} 


#close2 { 
position:absolute; 
width:25px; 
height:24px; 
background:url(images/graphics/CloseIcon.png); 
right:0px; 
top:0px; 
z-index: 9999; 
display: none; 
margin-left:-30px; 



} 
#show2 { 
display: block; 
height: 0px; 
opacity: 1; 
margin-left:-30px; 
clear:both; 

} 

#box_project2 { 

background:#fff; 
text-align: left; 
clear:both; 
height:100%; 


} 
+0

我覺得你的動畫,而它的不透明度爲0。我不完全跟隨,但如果你設置了在jsfiddle.net上的一個例子,它會更好地表達你的問題。 :) –

+0

http://richardhedberg.com/portfolionew/index.html#如果你想你可以看看我的網站。 –

回答

0

什麼是你的問題?

首先你想做負載,然後在負載的回調動畫?

但是,如果您想向用戶顯示已加載多少數據,那麼首先您需要編寫自己的動畫類。然後在每一幀你加載的數據和回調你去下一幀。請注意,在這種情況下,您會動態更改網址,因爲您無法控制來自某個ajax調用的數據。

+0

實際上,只有在動畫完成時纔會執行加載。如果我沒有弄錯,'animate()'的回調函數會在動畫結束時執行。 – Dutchie432

+0

當然可以。我有點累。 :)剛剛編輯答案。 – freakish

+0

對不起,很可能不清楚,我想要的是切換我的項目與一個動畫擴展div加載在單獨的html文件(例如project1.html)。所以是的,我想要先加載文件,然後爲其添加動畫。 –

0

$(this).animate({ height: newHeight } 

也許應該有px單元追加並

$(this).animate({ height: newHeight + 'px' } 
+0

仍然只是爲300px生成$(this).animate({height:newHeight}部分根本不動畫。 –