需要编写滑动jquery代码来显示未看到的多个内容div

时间:2014-06-16 15:35:30

标签: jquery animation

我把以下小提琴放在一起: 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的动画,但这似乎比那里的内容更深入。

感谢您的帮助,谢谢。

1 个答案:

答案 0 :(得分:0)

我认为你的动画问题只是一些语法错误。也就是说,你错过了一些引用。所以,要纠正你给出的例子(注意,我也改变了这个,以便容器将动画留下它宽的像素数):

$('.site1').animate({'left': '-=300px'}, 2000, 'swing', function() {
    // do stuff
});

这是一个小提琴:http://jsfiddle.net/LTu92/

哦,我还将href上的div.site1属性更改为"#"而不是"",以避免错误。