Question

我有一个动画，其中有一个＆＃39; rightContentSpacer＆＃39;当我点击三个链接中的任何一个时，div的高度增加。＆＃39; rightContentSpacer＆＃39;从而与当时显示的div重叠，一旦重叠，我隐藏起来让下一个div显示出来。在延迟之后，随后再次降低高度，以揭示新的，现在显示的div（即对应于推送的链接的div）。效果类似于系船柱上下移动。

我的问题：第一次运行正常。然而，如果我推动同样的＆＃39;第二次链接（无论是在激活平均时间内其他链接的一个或两个之后），背景颜色消失。对于每个div都会发生这种情况 - 第一次显示背景颜色时会出现背景颜色。但如果显示两次，背景颜色会在第二个节目中消失。

如何防止背景颜色消失？

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/

我建议你按下“毛衣”，然后按“女裁缝”，然后再按一下“毛衣”＃39;看看我的意思。

Answer 1

鉴于你的小提琴示例，我会更改你的＆＃34;链接＆＃34;的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);
        });
    }
});

Updated fiddle

但是在回答你的原始问题时，背景正在消失，因为你的内容div的高度被设置为0 - 我认为你将高度设置为90％，但动画是在div为其时运行的不可见或它所在的地方的高度为0（因此0的90％将为0）

jQuery＆＃39; animate height＆＃39; /＆＃39; slideDown＆＃39;组合使背景颜色在第二次激活时消失

1 个答案: