jQuery 'animate height'/'slideDown'组合使第二次激活时背景颜色消失

Question

我有一个动画，当我单击三个 link 中的任何一个时，'rightContentSpacer' div 的高度会增加。 'rightContentSpacer' 从而与当时显示的 div 重叠，一旦重叠，我就隐藏起来为下一个要显示的 div 让路。 'rightContentSpacer'，在延迟之后，随后再次降低高度以发现现在显示的新的 div（即 div 对应于 link 被推）。效果类似于护柱上下移动。

我的问题：这第一次工作正常。然而，如果我第二次按下 'same' link（无论是在同时激活其他 link 的 1 个或两者之后），背景颜色都会消失。每个 div 都会发生这种情况 - 背景颜色是第一次 'shown'；但是如果显示两次，背景色颜色会在第二次显示时消失。

如何防止背景颜色消失？

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/

我建议你按 'the Sweaters'，然后按 'the Seamstress'，然后再按一次 'the Sweaters' 看看我的意思。

Answer 1

鉴于您的 fiddle 示例，我会将您 "links" 的 html 更改为实际链接 - 使用以下样式使新链接看起来像您的旧链接：

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

然后将 class 添加到内容块，然后您可以将 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);
        });
    }
});

Updated fiddle

但在回答您最初的问题时，背景正在消失，因为您的内容 div 的高度设置为 0 - 我认为您将高度设置为 90%，但动画是运行在 div 不可见或它所在位置的高度为 0 时（因此 0 的 90% 将为 0）

jQuery 'animate height'/'slideDown'组合使第二次激活时背景颜色消失

jQuery 'animate height'/'slideDown' combination making background color disappear when activated second time

jquery

jquery-animate

show-hide

background-color

slidedown