javascript - jQuery UI:从右到左动画

我有一个从右到左的jQuery动画问题。我的JS代码如下所示：

$('.tabs').each(function(index){
    $(this).click(function(event){
        $('.tabs').css('left', '1410px').removeClass('open');
        $('.blocks').css('width', '0px');
        $('.blocks').css('left', '1385px');
        $(this).animate({left: '1397px'}, 200).addClass('open');
        $('.blocks').eq(index).animate({left: '520px'}, 2500);
        });
    });

您可以在我的小提琴演示中看到其余的代码：http://jsfiddle.net/DM346/5/

如您所见，它正确地设置了动画（从右到左），但是整个文本块都是透明的（我知道它是因为我将宽度设置为0，但是我必须这样做，因为否则它将在按钮上弹出）。

我想要实现以下目标：http://jsfiddle.net/6dwvs/19/
但从右到左如我的示例有人可以帮忙吗？基本上，问题在于文本块的“隐身性”。

最佳答案

我会使用z-index正确放置容器，FIDDLE

加：

#tabs-cont {
    overflow:hidden;
    z-index:20;
}

.blocks {
    z-index:-1;
}

将选项卡包装在div中

<div id="tabs-cont">
    <div class="tabs" id="tab1">HOME</div>
    <div class="tabs" id="tab2">VIDEO</div>
    <div class="tabs" id="tab3">TEXT</div>
    <div class="tabs" id="tab4">CONTACT US</div>
    <div class="tabs" id="tab5">HELP</div>
</div>

并将js更改为：

$(document).ready(function () {
    $('.tabs').each(function (index) {
        $(this).click(function (event) {
            $('.tabs').css('left', '895px').removeClass('open');
            $('.blocks').css('left', '875px');
            $('.blocks').css('width', '865px');
            $(this).animate({
                left: '875px'
            }, 200).addClass('open');
            $('.blocks').eq(index).animate({
                left: '0px'
            }, 2500);
        });
    });
});

关于javascript - jQuery UI:从右到左动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19758996/