在兩個頁面之間加載動畫div

我在單獨的頁面上有兩個相同的div - 是否有方法將它們從開始位置着陸頁設置爲第二頁上的位置並打開第一個內容div（藍色），所以基本上動畫留下來做一個垂直線，而不是立方體。在兩個頁面之間加載動畫div

所以從這裏http://www.crazyedits.co.uk/

在這裏http://www.crazyedits.co.uk/home.php#並打開第一彩色單嗎？

我剛開始學習，所以儘量保持它簡單的偷看（抱歉，如果我的問題是顯而易見的） - 但我已經嘗試了5個小時找到解決方案，似乎沒有任何工作。

着陸頁按鈕

<div class="button1"> 
    <div id="icon"><img src="Images/home.png" width="200" height="160" /></div> 
    <div id="title">HOME</div> 
</div>

內容頁按鈕

<div> <div class="content_button1"> 
    <div ="icon"><a href="#home_page" ><img src="Images/home.png" width="200" height="160" style="border:none;" /></a></div> 
    <div id="title"><li><a href="#home_page" >HOME</a></li></div> 
    <div id="home_page" class="contain"></div> </div> 
</div>

CSS

我認爲這個問題我已經是我不得不設置2個不同的CSS集上的每個按鈕頁面 - 一個對齊他們在中心和一個對齊他們離開。所以，如果有，我可以使用相同的類，仍然可以得到4個廣場，因爲它們和一些具有絕對位置的做的話，我會更接近了一步製作方式，它的工作

/******page buttons*******/ 

.content_button1{width:199px; height:199px; margin:0px 0px 19px 0px; background-color:#09C;} 
.content_button2{width:199px; height:199px; margin:19px 0px 19px 0px; background-color:#C00;} 
.content_button3{width:199px; height:199px; margin:19px 0px 19px 0px; background-color:#F60;} 
.content_button4{width:199px; height:199px; margin:19px 0px 19px 0px; background-color:#093;} 

/*****landing page buttons*****/ 

.button1{width:199px; height:199px; float:left; margin:20px ; background-color:#09C;} 
.button2{width:199px; height:199px; float:left; margin:20px ; background-color:#C00;} 
.button3{width:199px; height:199px; float:left; margin:20px ; background-color:#F60;} 
.button4{width:199px; height:199px; float:left; margin:20px ; background-color:#093;}

來源

2012-10-29 Tony ' Sh4rk' Willis

不知道我完全理解你的問題，但你有沒有考慮過動畫的CSS'使用jQuery position'（http://api.jquery.com/animate/）？ – greener

我已經看過它，但在我有點出於我的深度之前幾乎沒有使用過jQuery。基本上是主頁上的4個大方塊 - 如果點擊了任何東西，我希望它們全部過渡到上面第二個鏈接中顯示的頁面的左側，然後打開相應的顏色內容（輔助任務atm），主要是讓他們移動到左邊。 –

你不能真正使動畫2頁wecause頁面之間2裝載在瀏覽器中和動畫是通過JS完成的。最好的解決方案是讓你的東西在一個頁面中，並玩絕對的位置。

我寫了一段可能有點複雜的代碼，但我評論了很多，爲了向你解釋所有的東西。

四個正方形首先放置在頁面的中心位置，當您調整窗口大小時重新定位。

然後，當您點擊四個方塊中的一個時，將啓動一個動畫並顯示相應的內容。

之後，點擊另一個方塊出現相應的內容。

祝你好運！

http://fiddle.jshell.net/4SZXT/11/ < - 該代碼是在這裏

來源

2012-10-29 22:57:50 MatRt

對不起，我沒有看到這個解決方案昨天也會有所幫助很多謝謝 –

謝謝你的代碼+甚至更多它的解釋。我對盒子的佈局和最終放置位置做了一些細微的改動，並添加了圖像和重新調整大小等等。現在它看起來是我想要的90％，並且在小提琴中的表現幾乎與我想要的一樣。但是我不能得到這個工作在網頁上（這可能是我錯過了一些東西）我已經添加了一個鏈接到jquery lib，css和一個名爲cube.js的文件，但是這不起作用。我必須把腳本放在html文件中嗎？還是我想念的東西？ http://jsfiddle.net/4SZXT/33/ –

排序它 - 安裝螢火蟲，事實證明一切都是正確的 - 除了在代碼結束時防止它感到高興的空間（再次感謝你@ user1073122）現在到去排序其餘的內容和佈局 –

檢查了這一點：JSFIDDLE

CSS

.button {width:199px; height:199px; position:absolute} 
#top-left {background-color:#09C;} 
#top-rite {background-color:#C00;} 
#bot-left {background-color:#F60;} 
#bot-rite {background-color:#093;} 

#top-left.pos {left:50%; margin-left: -110px; top:0px; } 
#top-rite.pos {left:50%; margin-left: 110px; top:0px; } 
#bot-left.pos {left:50%; margin-left: -110px; top:220px; } 
#bot-rite.pos {left:50%; margin-left: 110px; top:220px; }

你可以看到如何類和ID以這樣的方式，你可以很容易地得到向左走的位置是結構化。如果你想要一些華而不實的動畫效果去用它，你可能想看看這個：http://api.jquery.com/animate

JQuery的

$(document).ready(function(){ 
    $('.button').click(function(){ 

     $('#center_content').css('margin-top','0'); 
     $('#top-left').css('left','0').css('margin-left','0').css('top','10px'); 
     $('#top-rite').css('left','0').css('margin-left','0').css('top','220px'); 
     $('#bot-left').css('left','0').css('margin-left','0').css('top','430px'); 
     $('#bot-rite').css('left','0').css('margin-left','0').css('top','640px'); 
    });   
});

來源

2012-10-29 22:06:10 greener

這就是我爲了讓自己走向正確的方向所做的一切 - 我現在要去看動畫，看看它的領先位置。我不能投票它芽，因爲我有一個虛弱的代表在莫 - 但再次感謝 –

在兩個頁面之間加載動畫div

回答

相關問題