jquery动画2.元素坐标动画效果（创建一个图片走廊(2)

nextChild.add(prevChild).click(function (e) {
//阻止默认事件，否则动画效果就没有了
　　e.preventDefault();
var arrow = $(this).parent();
　　//当前slide没有动画时，我们才添加新的动画效果
　　if (!slide.is(':animated')) {
slide.animate({
left: (arrow.attr('id') === 'prev') ? '+=400' : '-=400'
}, 'slow', 'easeOutBack', function () {
(arrow.attr("id") === "prev") ? postAnim("back") : postAnim("forward");
});
}
});

最后是图片对应的各自导航的功能实现。

复制代码 代码如下:

$('#ui li a').not(prevChild).not(nextChild).click(function (e) {
//阻止默认事件
　　e.preventDefault();
　　//获取当前活动图片id
key = $(this).attr('href').split('#')[1];
//设置动画效果
　　slide.animate({
left: details[key].position
}, 'slow', 'easeOutBack', postAnim);
});

本课的内容完毕了，大家可以下载demo，查看功能具体是如下实现的。

　　demo下载地址：jQuery.animation.position

您可能感兴趣的文章: