Question

我是一名设计专业学生（因此在我的代码中可能存在不良习惯），并尝试建立一个家庭树网站，您可以点击一个圆圈（祖先）并查看相应的血统。到目前为止，一切都在发挥作用，除非我试图为个别祖先召唤血统（而不是呼唤整整一代）。

我有个别的祖先，因为div位于“代”父div中。我的jquery有效，但是当我点击各个圆圈时，下一个div会丢失它们的“display：inline-block”属性并且只是相互堆叠。过去几个小时我一直在努力解决它，但无济于事。

以下是相关代码：

HTML：

<div class="elevengen">
    <div class="circle" id="louisa"></div>
</div>
<div class="tengen">
    <div class="circle" id="hank"></div>
    <div id="invisible"></div>
    <div id="invisible"></div>
    <div id="invisible"></div>
    <div class="circle" id="helen"></div>
</div>
<div class="ninegen">
    <div class="circle" id="hls1"></div>
    <div id="invisible"></div>
    <div class="circle" id="gransav"></div>
    <div id="invisible"></div>
    <div id="invisible1"></div>
    <div class="circle" id="poppy"></div>
    <div class="circle" id="grandma"></div>
</div>

CSS：

.elevengen{
margin:auto;
width:60px;
height:60px;
margin-top:50px;
}
.tengen{
margin:auto;
width:300px;
height:60px;
display:none;
}

.ninegen{
margin:auto;
width:420px;
height:60px;
display:none;
}
#louisa{
border-width:4px;
border-color: #8951a0;
margin:auto;
margin-top: 50px;
}

/*tengen*/
#hank{
display:inline-block;
border-color:#d14727;
}

/*ninegen*/
#hls1{
display:inline-block;
border-color:#e96238;
display:none;
}
#gransav{
display:inline-block;
border-color:#e96238;
display:none;
}

#poppy{
display:inline-block;
border-color:#6986c4;
display:none;
}

#grandma{
display:inline-block;
border-color:#6986c4;
display:none;
}

JQuery的：

$('#louisa').click(function(){
    $('.tengen').fadeTo(1000, 1.00);
});
$('#hank').click(function(){
    $('#hls1, #gransav').fadeTo(1000, 1.00);
});

对于帖子的长度感到抱歉，只是想尽可能清楚。任何和所有帮助表示赞赏！

Answer 1

只需使用.animate

$('#louisa').click(function(){
    $('.tengen').animate({opacity: 1}, 1000);
});
$('#hank').click(function(){
    $('#hls1, #gransav').animate({opacity: 1}, 1000);
});

Answer 2

谢谢，动画回答不起作用（不确定原因），但我最终陷入了堆栈溢出的兔子洞，并找到了一个有效的答案：

$("div").fadeIn().css("display","inline-block");

我想我需要删除我的CSS中的display:inline-block，并将css更改为我需要它在我的Jquery中。

谢谢！

在fadeTo（）上维护“display：inline-block”

2 个答案: