Question

我正在尝试创建一个由3个列表项组成的导航面板。单击列表项时，相应的一组链接（子窗口）将滑出以显示自身。

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

在这个演示中，该技术可行，但它有点儿麻烦。单击链接越多，关闭按钮和（+）按钮似乎就会丢失位置。他们似乎失去了相对的位置，并且相对于容器，而不是他们的父母，他们就像绝对定位一样。

我想以不同的方式写这个，或者看看是否有任何同伴开发者有更好的技术来完成同样的任务。目前我的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（现在是小提琴），请告诉我。提前谢谢。

Answer 1

关闭和打开按钮失去定位的原因是因为它们继承了父容器的相对值，这超过了它们的绝对定位。只需将position:relative添加到#serviceBox li .panel a.closePanel即可修复它！

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

1 个答案: