fadeTo（）に「display：inline-block」を維持

Question

私は設計学生です（したがって、コード内の潜在的に悪い習慣）、あなたが1つのサークル（祖先）をクリックできるファミリーツリーのウェブサイトを構築しようとしています。対応する系統を見てください。私が個々の祖先のために系統を呼び出そうとする場合を除いて、これまでのところすべてが働いています（世代全体を呼び出すのではなく）。

"世代"の親div内にdivsとして個別の祖先があります。私の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

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

Answer 2

感謝を.animate使うだけで、アニメーションの答えは（理由はわからない）動作しませんでしたが、私は、スタックオーバーフローのウサギの穴に終わったと仕事をした答えが見つかりました：

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

私は、私のCSSでdisplay:inline-blockを削除し、CSSを私のJqueryに必要なものに変更する必要があると思います。

ありがとうございました！