jQuery"动画高度"/"向下滑动"组合使背景颜色在第二次激活时消失

Question

我有一个动画，当我点击三个链接中的任何一个时，'rightContentSpacer'div的高度会增加。'rightContentSpacer'因此重叠了当时显示的div，一旦重叠，我隐藏为下一个div让路。'rightContentSpacer'，延迟后，随后降低高度再次发现新的，现在显示，div(即div对应的链接推)。这种效果类似于一个上下移动的系柱。

我的问题:这工作良好的第一次。然而，如果我第二次推送"相同"链接(无论是在激活1个链接之后，还是同时激活两个链接)，背景色就会消失。这发生在每一个div - background color是第一次被"显示";但如果播放两次，则背景色在第二次播放时消失。

如何防止背景颜色消失?

JQuery:

$("#linkSweaters").click(function(){
    if ($('#rightContentService').css('display') == 'none' && $('#rightContentContact').css('display') == 'block'){
        $("#rightContentSpacer").animate({
            height: "100%",
            },1000);
        $("#rightContentContact").animate({
            height: "0",
            },1000);
        $("#rightContentContact").hide({
            });
        $('#rightContentSweaters').delay(2000).slideDown(1000, function() {
            });
        $("#rightContentSpacer").delay(1000).animate({
            height: "10%",
            },1000);
    } else if ($('#rightContentService').css('display') == 'block' && $('#rightContentContact').css('display') == 'none'){
        $("#rightContentSpacer").animate({
            height: "100%",
            },1000);
        $("#rightContentService").animate({
            height: "0",
            },1000);
        $("#rightContentService").hide({
            });
        $('#rightContentSweaters').delay(2000).slideDown(1000, function() {
            });
        $("#rightContentSpacer").delay(1000).animate({
            height: "10%",
            },1000);
    } else if ($('#rightContentSweaters').css('display') == 'block'){
        $("#linkContact").off('click');
            }
    });
</script>

有关CSS:

        #rightContent {
            }
            #rightContentSpacer {
                height: 10%;
                margin:0 auto;
                background-color:;
                }
            #rightContentService {
                height: 90%;
                width:650px;
                margin:0 auto;
                background-color: red;
                position:absolute;
                display:block;
                }
            #rightContentSweaters {
                height: 90%;
                width:650px;
                margin:0 auto;
                background-color: red;
                position:absolute;
                display:none;
                }
            #rightContentContact {
                height: 90%;
                width:650px;
                margin:0 auto;
                background-color: red;
                position:absolute;
                display:none;
                }

全屏示例如下:https://jsfiddle.net/ff3r8t9x/embedded/result/

示例代码:https://jsfiddle.net/ff3r8t9x/

我建议你按"毛衣"，然后按"女裁缝"，然后再按"毛衣"，看看我是什么意思。

Answer 1

给你的提琴的例子，我会改变你的"链接"的html为实际的链接-使用以下样式，使新的链接看起来像你的旧的:

.link {color:#ffffff; text-decoration:none;}

然后添加一个类到内容块，然后你可以大量简化你的jQuery到:

var contentDivs = $('#rightContent').children('div.content'),
    spacer = $('#rightContentSpacer');
$('.link').click(function (e) {
    e.preventDefault();
    var contentToShow = $($(this).attr('href'));
    if (!contentToShow.is(':visible') && !spacer.is(':animated')) {
        spacer.stop().animate({ height: '100%' }, 1000, function() {
            contentDivs.hide();
            contentToShow.show();
            spacer.animate({ height: '10%' }, 1000);
        });
    }
});

更新小提琴

但是在回答你原来的问题，背景正在消失，因为你的内容div的高度被设置为0 -我认为你是动画的高度为90%，但动画运行的时候，div要么不可见，要么它所在的地方有一个高度为0(因此90%的0将是0)