使用动画定位问题的Jquery滑动面板

Question

我正在尝试创建一个由3个列表项组成的导航面板。当单击列表项时，一组相应的链接(subnav)会滑出以显示其自身。

我在这里有一个有效的演示：http://jsfiddle.net/M8fS3/2/

在这个演示中，这项技术是有效的，但它有一点but。单击链接的次数越多，关闭按钮和(+)按钮似乎就失去了它们的位置。它们似乎失去了它们的相对定位，并且表现得好像它们相对于容器，而不是它们的父对象是绝对定位的。

我想以一种不同的方式来写这篇文章，或者看看有没有其他开发人员有更好的技术来完成同样的任务。目前我的jquery如下：

$("#serviceBox li a").on("click", function(){
        $(this).animate({
            'left' : -250
        }, {duration: 200, queue: false, easing: 'linear'});

        $(this).next(".panel").animate({
            'left' : 0
        },  {duration: 200, queue: false, easing: 'linear'});
    });

    $("a.closePanel").on("click", function(){
        $(this).parent().animate({
            'left' : 250
        },  {duration: 200, queue: false, easing: 'linear'});

        $(this).parent().prev("a").animate({
            'left' : 0
        },  {duration: 200, queue: false, easing: 'linear'});
    });

我将队列设置为false，因为我希望动画彼此同步。让我知道如果你想在这里看到HTML和CSS (这是目前的小提琴)。提前使用THanks。

Answer 1

关闭和打开按钮丢失其定位的原因是因为它们继承了父容器的相对值，该值覆盖了它们的绝对定位。只需在#serviceBox li .panel a.closePanel中添加position:relative就可以解决这个问题！