在两个页面之间加载动画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

回答

相关问题