我把以下小提琴放在一起: http://jsfiddle.net/96U7Q/
.site1 img{width:300px; height:197px;}
.site2 img{width:300px; height:197px;}
.site1link{background-color:#CCC;width:300px; height:167px;}
.site1link:hover{background-color:#FFF;}
.site2link{background-color:#333;width:300px; height:167px;}
.site2link:hover{background-color:#FFF;}
这两个方面将是该网站的两个不同方面。我需要帮助的地方是使用类似于
的东西编写jquery动画$('.site1').animate({left: "100%"}, 2000, 'swing', function()
我需要的是" Site 1"单击它向左滑动(从观察者眼睛中移出,因为它将包含不再需要看到的图形),并且包含站点1内容的div将滑入页面的中心并且是唯一可见的东西。如果链接为" Site 2"单击它将向右滑动到与站点1相同的内容,以及"站点2和#34;的内容。将以相同的方式从右侧滑入页面的中心。
在每个"部分"或网站 - 我需要一个链接返回" main"阶段,再次显示两个网站的链接,以便轻松导航。
我真的研究过jquery以及如何设置div的动画,但这似乎比那里的内容更深入。
感谢您的帮助,谢谢。
答案 0 :(得分:0)
我认为你的动画问题只是一些语法错误。也就是说,你错过了一些引用。所以,要纠正你给出的例子(注意,我也改变了这个,以便容器将动画留下它宽的像素数):
$('.site1').animate({'left': '-=300px'}, 2000, 'swing', function() {
// do stuff
});
这是一个小提琴:http://jsfiddle.net/LTu92/
哦,我还将href
上的div.site1
属性更改为"#"
而不是""
,以避免错误。