Databases
StackOverflow2013
Postsdbo
POFade Out/Fade In of List Items
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFade Out/Fade In of List Items
    text
    copied!<p>This is for a "Meet Our Staff" page where there is a vertical unordered list of small images associated with a staff member (#staffDirectory). When the user clicks a different staff member than the one displayed, I want the current large listitem (which includes an image and info about the member - and is assigned the class "staffSelected" and is displayed in the div #staffMember) to fadeOut, lose the class, then take the corresponding listitem (the one the user clicked in #staffDirectory), fadeIn that one, and add the "staffSelected" class. </p> <p>What is happening now is that there is an overlap and the new listitem briefly displays to the right of the old one (but this only happens the second and subsequent times I click from the #staffDirectory list - the first time works beautifully). So, the transitions are not smooth. I assume this issue has to deal with my declaration of the newMember variable or its use in the fadeIn method.</p> <p>JS and CSS are below. Thanks in advance.</p> <p>JS:</p> <pre><code>$(document).ready(function() { $("#staffDirectory ul li").click(function() { var index = $("#staffDirectory ul li").index(this); var newMember = null; newMember = $("#staffMember ul li").get(index); $(".staffSelected").fadeOut(500, function() { $(newMember).fadeIn(500).addClass('staffSelected'); }); }); }); </code></pre> <p>CSS:</p> <pre><code>#staffContainer { margin-top: 45px; } #staffDirectory { margin: 25px; float: left; } #staffDirectory ul { list-style:none; } #staffDirectory ul li { opacity: 0.5; } #staffDirectory img{ width: 55px; cursor: pointer; } #staffDirectory li:hover{ opacity: 0.7; } .selectedMember { opacity: 1.0 !important; } #staffMember{ } #staffMember ul{ list-style: none; } #staffMember li{ display: inline; } .staffMemberImage { float: left; margin-right: 30px; } .staffName { color: #7F0037; font-variant: small-caps; font-size: 20px; font-weight: bold; text-align: center; } .staffSelected { display: inherit; } #staffMember li:not(.staffSelected) { display: none; } </code></pre> <p>HTML:</p> <pre><code>&lt;div id="staffDirectory"&gt; &lt;ul&gt; &lt;li class="selectedMember"&gt;&lt;img src="img/silhouette.jpg"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="img/silhouette.jpg"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="img/silhouette.jpg"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="img/silhouette.jpg"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="img/silhouette.jpg"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="img/silhouette.jpg"&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="staffMember"&gt; &lt;ul&gt; &lt;li class="staffSelected"&gt; &lt;img src="img/silhouette.jpg" class="staffMemberImage"&gt; &lt;p class="staffName"&gt;Jane Doe 1&lt;/p&gt; &lt;p class="staffDesc"&gt; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. &lt;/p&gt; &lt;/li&gt; &lt;li&gt; &lt;img src="img/silhouette.jpg" class="staffMemberImage"&gt; &lt;p class="staffName"&gt;Jane Doe 2&lt;/p&gt; &lt;p class="staffDesc"&gt; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. &lt;/p&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>EDIT: From Firebug (I would post an image, but I'm new to the site):</p> <pre><code>&lt;div id="staffMember"&gt; &lt;ul&gt; &lt;li class="" style="opacity: 1; display: none;"&gt; &lt;li class="" style="display: none; opacity: 1;"&gt; &lt;li class="" style="display: none; opacity: 1;"&gt; &lt;li class="" style="display: none; opacity: 1;"&gt; **&lt;li class="staffSelected" style="display: list-item; opacity: 1;"&gt; &lt;li class="staffSelected" style="display: list-item; opacity: 1;"&gt;** &lt;img class="staffMemberImage" src="img/silhouette.jpg"&gt; &lt;p class="staffName"&gt;Jane Doe&lt;/p&gt; &lt;p class="staffDesc"&gt; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. &lt;/p&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload