在 fadeTo() 上维护“display:inline-block” [重复]答案

【问题标题】：Maintain "display:inline-block" on fadeTo() [duplicate]在 fadeTo() 上维护“display:inline-block” [重复]
【发布时间】：2017-01-01 01:07:50
【问题描述】：

我是一名设计专业的学生（因此我的代码中存在潜在的不良习惯），并试图建立一个家谱网站，您可以在其中单击一个圆圈（祖先）并查看其对应的血统。到目前为止，一切都在工作，除了我试图为个别祖先调用血统（而不是调用整整一代）。

我将各个祖先作为 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);
});

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

【问题讨论】：

你不应该有相同id的不同元素。

标签： jquery html css display

【解决方案1】：

只需使用 .animate

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

【讨论】：

【解决方案2】：

谢谢，动画答案不起作用（不知道为什么），但我最终陷入了堆栈溢出的兔子洞并找到了一个有效的答案：

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

我认为我需要删除我的 css 中的 display:inline-block，并将 css 更改为我需要在我的 Jquery 中的内容。

谢谢！

【讨论】：