Databases
StackOverflow2013
Postsdbo
POJQuery FadeOut function not occurring on the first attempt
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery FadeOut function not occurring on the first attempt
    primarykey
    data
    text
    <p>I have a page which has an unordered list down one side, to switch between different containers with images inside to the right of the list.</p> <p>The page in question is at the following URL with the JQuery code in the head tag:</p> <p><a href="http://dev.bathroomwarehouse.com/bathrooms.html" rel="nofollow">http://dev.bathroomwarehouse.com/bathrooms.html</a></p> <p>After clicking an item on the left as soon as the page has loaded (for example 'Burgundy') the images to the right (encapsulated by a div container) disappears without animation, despite the 'fadeOut' function in JQuery being used.</p> <p>After the first change, the fadeOut function acts as expected, and the div to the right fades out, and the new div fades in.</p> <p>Can anyone help figure out why this is happening?</p> <p>The code in question is below:</p> <p>JQuery</p> <pre><code>$(document).ready(function () { $(".catList li").click(function() { $(".catList li").removeClass('selectedRange'); $(this).addClass("selectedRange"); var clickedItem = $(this).index(".catList li"); $(".images div").stop().fadeOut('slow', function () { $(".images div").removeClass("selectedImageGroup"); }); $(".images div:eq(" + clickedItem + ")").delay(750).fadeIn(function () { $(".images div:eq(" + clickedItem + ")").addClass("selectedImageGroup"); }); }); }); </code></pre> <p>HTML:</p> <pre><code>&lt;div class="imageSelector"&gt; &lt;ul class="catList"&gt; &lt;li class="selectedRange"&gt;&lt;h2&gt;Ivory&lt;/h2&gt;Modernist suite featuring with a touch of nostalgia…&lt;/li&gt; &lt;li&gt;&lt;h2&gt;Burgundy&lt;/h2&gt;Contemporary classic...&lt;/li&gt; &lt;li&gt;&lt;h2&gt;Evergreen&lt;/h2&gt;Minimalist with a unique shower feature...&lt;/li&gt; &lt;/ul&gt; &lt;div class="vertLine"&gt;&amp;nbsp;&lt;/div&gt; &lt;div class="images"&gt; &lt;div class="imageGroup selectedImageGroup"&gt; &lt;table class="imageGroupTable"&gt; &lt;tr&gt; &lt;td colspan="3" class="imageGroupMainImage"&gt; &lt;img src="img/ImageBrowser/B1/Main.jpg" alt="" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="imageGroupSmallImages"&gt; &lt;td&gt;&lt;img src="img/ImageBrowser/B1/Img1.jpg" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="img/ImageBrowser/B1/Img2.jpg" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="img/ImageBrowser/B1/Img3.jpg" alt="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="imageGroup"&gt; &lt;table class="imageGroupTable"&gt; &lt;tr&gt; &lt;td colspan="3" class="imageGroupMainImage"&gt; &lt;img src="img/ImageBrowser/B2/Main.jpg" alt="" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="imageGroupSmallImages"&gt; &lt;td&gt;&lt;img src="img/ImageBrowser/B2/Img1.jpg" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="img/ImageBrowser/B2/Img2.jpg" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="img/ImageBrowser/B2/Img3.jpg" alt="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="imageGroup"&gt; &lt;table class="imageGroupTable"&gt; &lt;tr&gt; &lt;td colspan="3" class="imageGroupMainImage"&gt; &lt;img src="img/ImageBrowser/B1/Main.jpg" alt="" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="imageGroupSmallImages"&gt; &lt;td&gt;&lt;img src="img/ImageBrowser/B1/Img1.jpg" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="img/ImageBrowser/B1/Img2.jpg" alt="" /&gt;&lt;/td&gt; &lt;td&gt;&lt;img src="img/ImageBrowser/B1/Img3.jpg" alt="" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USStrattonL
    1. USStrattonL
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJQuery FadeOut function not occurring on the first attempt
      1. This table or related slice is empty.
      1. VTUpMod
    1. COPlease post the relevant code in your question. A live link is fine, but it might disappear tomorrow and the community would prefer your question to survive that event.
      singulars
      1. POJQuery FadeOut function not occurring on the first attempt
      1. USFrédéric Hamidi
    2. COWorks fine here: http://jsfiddle.net/j08691/FhCBY/
      singulars
      1. POJQuery FadeOut function not occurring on the first attempt
      1. USj08691
    3. COThanks, can you tell why it doesn't work on my live page?
      singulars
      1. POJQuery FadeOut function not occurring on the first attempt
      1. USStrattonL
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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