頁面加載後的jQuery縮放比例

我試圖在頁面加載後向上擴展（一個接一個地）來動畫2 div。頁面加載後的jQuery縮放比例

我的目標是div 1通過稍長的延遲後的延遲之後在縮放（從div中心），然後div 2到規模出現。

作爲一個額外的，我也試圖讓每個div在懸停後略微縮放，並在鼠標移出後恢復正常。

編輯：我有一些事情在這裏http://jsfiddle.net/uwybR/7/但懸停效果不工作。

任何想法？

來源

2012-10-18 JB.

發佈你得到的代碼，做一個jsfiddle。 –

還請包括你已經嘗試過的代碼。 – hjpotter92

除了懸停效果外，我得到了大部分內容：http://jsfiddle.net/uwybR/7/ –

像這樣的東西可能是你想要做什麼：

$(document).ready(function() { 
    $('#div1').animate({ 
     width:'new width', 
     height:'new height' 
    },500, function(){ 
     $('#div2').animate({ 
      width:'new width', 
      height:'new height' 
     }, 500) 
    }) 
})

的第二個div將動畫後的第一個已完成。如果你想讓它們幾乎同時運行，你將不得不使用setTimeout()。

爲了您的懸停退房the hover function。

看看這個。哈弗給我帶來了一些麻煩，在它縮放之前似乎還有一點點延遲，但是這與我所能得到的一樣接近：JSFiddle

來源

2012-10-18 19:46:38 Throttlehead

啊，這是一個很好的方法，但以這種方式，我如何獲得內部的內容來擴展並獲取div規模從中心？ –

那麼，如果內容是純粹的CSS與它自己的風格，這是不可行的。您可以嘗試使用.addClass（'scaleClass'），而不是使用.animate，然後在CSS中執行CSS3 2D變換比例，但如果您希望內部的所有內容都可以與父級一起縮放，我會使用div背景中的圖像設置爲'蓋' – Throttlehead

頁面加載後的jQuery縮放比例

回答

相關問題