Databases
StackOverflow2013
Postsdbo
POIssue with jQuery animation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIssue with jQuery animation
    text
    copied!<p>I've got a nested list and the jQuery script shown below to show/hide each list separately (+/- link) and to show/hide all lists at once (show all/hide subcategories). When I use show() and hide(), it works as expected, but when I use animations(eg, show('slow') or slideDown()), I get a strange issue. When doing:</p> <p>1-show all<br> 2-hide asian<br> 3-hide all<br> 4-show asian</p> <p>all subcategories of asian are visible, thought everything is closed in step 3.</p> <p>It seems that the problem is in the line</p> <pre><code> $(this).next().show('slow'); </code></pre> <p>in step 4, just before this line all the children of asian are hidden as expected, but after it, they all are visible thought only the first children (with class level0) should be visible.</p> <p>As a test, I also changed the color of the element selected using the same selector. After step 4, asian subcategories with level1 are black as expected, but visible. It seems that the animation also applies to the children of the selected element...</p> <p>I might miss something, but since this behaves as expected when using just show() and hide(), I thought that it could be a bug.</p> <p>Anybody could help?<br> thanks</p> <p>jul</p> <p>Here's the script:</p> <pre><code>$('ul.subcategory').hide(); $('a.subcategory').click( function() { if ($(this).next('ul.subcategory').is(':hidden')) { $(this).next('ul.subcategory').show('slow'); $(this).next('ul.subcategory').css('color', 'white'); $(this).html('&amp;#x2013;'); } else { $(this).next('ul.subcategory').hide('slow'); $(this).next('ul.subcategory').css('color', 'black'); $(this).html('+'); } return false; } ); $("a.showall").toggle( function() { $('ul.subcategory').show('slow'); $('ul.subcategory').css('color', 'white'); $('a.subcategory').html('&amp;#x2013;'); $(this).html(' (hide subcategories)'); return false; }, function() { $('ul.subcategory').hide('slow'); $('ul.subcategory').css('color', 'black'); $('a.subcategory').html('+'); $(this).html(' (show all)'); return false; } ); </code></pre> <p>and the HTML:</p> <pre><code>&lt;ul id="category_region"&gt;&lt;span class="category_region"&gt;By region &lt;/span&gt;&lt;a class="showall" href=""&gt; (show all)&lt;/a&gt; &lt;li&gt;&lt;input type="checkbox" name="category" value="1"/&gt;African &lt;a class="subcategory" id="1" href=""&gt;+&lt;/a&gt; &lt;ul class="subcategory level0"&gt; &lt;li&gt;&lt;input type="checkbox" name="category" value="2"/&gt;Algerian&lt;/li&gt; &lt;li&gt;&lt;input type="checkbox" name="category" value="3"/&gt;Senegalese&lt;/li&gt; ... &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;input type="checkbox" name="category" value="6"/&gt;Asian &lt;a class="subcategory" id="6" href=""&gt;+&lt;/a&gt; &lt;ul class="subcategory level0"&gt; &lt;li&gt;&lt;input type="checkbox" name="category" value="7"/&gt;East Asian &lt;a class="subcategory" id="7" href=""&gt;+&lt;/a&gt; &lt;ul class="subcategory level1"&gt; &lt;li&gt;&lt;input type="checkbox" name="category" value="8"/&gt;Chinese&lt;/li&gt; &lt;li&gt;&lt;input type="checkbox" name="category" value="9"/&gt;Japenese&lt;/li&gt; ... &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;input type="checkbox" name="category" value="10"/&gt;North Asian &lt;a class="subcategory" id="10" href=""&gt;+&lt;/a&gt; &lt;ul class="subcategory level1"&gt; &lt;li&gt;&lt;input type="checkbox" name="category" value="11"/&gt;Russian&lt;/li&gt; &lt;li&gt;&lt;input type="checkbox" name="category" value="51"/&gt;Other&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; ... &lt;/ul&gt; &lt;/li&gt; ... &lt;/ul&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