Pflegen Sie "Anzeige: Inline-Block" auf FadeTo()

Question

Ich bin ein Design-Student (daher die potenziell schlechten Gewohnheiten in meinem Code) und versuchen, eine Stammbaum-Website, wo Sie auf einen Kreis (Vorfahre) und klicken können Sieh ihre entsprechende Linie. Bisher hat alles funktioniert, außer wenn ich versuche, eine Abstammungslinie für einzelne Vorfahren aufzurufen (im Gegensatz zu einer ganzen Generation).

Ich habe die einzelnen Vorfahren als divs eingebettet in eine "Generation" Eltern div. Meine jQuery funktioniert, aber wenn ich auf einzelne Kreise klicke, verlieren die nächsten divs ihre Eigenschaft "display: inline-block" und erscheinen einfach übereinander gestapelt. Ich habe in den letzten paar Stunden gearbeitet, um es zu reparieren, ohne Erfolg.

Hier ist der entsprechende Code:

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); 
}); 

Sorry für die Länge der Post, nur versucht, so klar sein wie möglich. Irgendwelche Hilfe geschätzt!

Answer 1

Verwenden Sie einfach .animate

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

Answer 2

Danke, die belebte Antwort nicht funktionierte (nicht sicher, warum), aber ich endete in dem Kaninchenbau von Stapelüberlauf auf und fand eine Antwort, die Arbeit hat:

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

ich glaube, ich brauchte die display:inline-block in meinem CSS zu Löschen und Ändern von CSS zu dem, was ich brauche es in meinem Jquery zu sein.

Vielen Dank!