Databases
StackOverflow2013
Postsdbo
POjQueryUI show/hide animation issue with child nodes
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQueryUI show/hide animation issue with child nodes
    text
    copied!<p>I'm having trouble with the show()/hide() function of jQueryUI. They basically deactivate my CSS for the duration of the animation.</p> <p>jsFiddle link: <a href="http://jsfiddle.net/UBATE/1/" rel="nofollow">http://jsfiddle.net/UBATE/1/</a></p> <p>According to the API: </p> <p><a href="http://docs.jquery.com/UI/Effects/Drop" rel="nofollow">http://docs.jquery.com/UI/Effects/Drop</a>, </p> <p>I've built the following function:</p> <pre><code>updateTeamLists = function(args) { // fade out -&gt; rebuild the content -&gt; fade in $("#team1, #team2").hide("drop", {"direction": "right"}, 600, function() { rebuildTeamLists(args); $(this).show("drop", {"direction": "right"}, 600); }); }; </code></pre> <p>The child DOM nodes appear to lose all their CSS attributes in the beginning of the animation, i.e. they stop floating (or lose their inline-block display) and their backgrounds vanish instantly. However, the animation and the fading out of the text work fine.</p> <p>HTML DOM structure: </p> <pre><code>&lt;div id="teams"&gt; &lt;div id="team1"&gt; &lt;ul&gt; &lt;li&gt;Player 1&lt;/li&gt; &lt;li&gt;Player 2&lt;/li&gt; &lt;li&gt;Player 3&lt;/li&gt; &lt;li&gt;Player 4&lt;/li&gt; &lt;li&gt;0 Pts&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="team2"&gt; &lt;ul&gt; &lt;li&gt;Player 5&lt;/li&gt; &lt;li&gt;Player 6&lt;/li&gt; &lt;li&gt;Player 7&lt;/li&gt; &lt;li&gt;Player 8&lt;/li&gt; &lt;li&gt;0 Pts&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS: </p> <pre><code>#content &gt; #teams { margin-top: 10px; padding: 5px 5px 5px 22px; width: 650px; border: 2px solid #bfbfbf; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-sizing: border-box; -moz-box-sizing:border-box; } #content &gt; #teams &gt; div { margin-top: 5px; display: block; height: 28px; } #content &gt; #teams &gt; div:first-child { opacity: 1.0; } #content &gt; #teams &gt; div:last-child { opacity: 0.6; } #content &gt; #teams &gt; div &gt; ul &gt; li { height: 25px; width: 125px; border-width: 1px; border-style: solid; margin-left: 5px; display: inline-block; } #content &gt; #teams &gt; div &gt; ul &gt; li:first-child { -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } #content &gt; #teams &gt; div &gt; ul &gt; li:last-child { -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; width: 50px !important; } #content &gt; #teams &gt; #team1 &gt; ul &gt; li { background: rgb(229,130,130); /* Old browsers */ background: -moz-linear-gradient(top, rgb(229,130,130) 0%, rgb(216,43,43) 51%, rgb(232,153,153) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(229,130,130)), color-stop(51%,rgb(216,43,43)), color-stop(100%,rgb(232,153,153))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* IE10+ */ background: linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* W3C */ border-color: rgb(229,130,130); text-align: center; padding-top:3px; } #content &gt; #teams &gt; #team2 &gt; ul &gt; li { background: #b3dced; /* Old browsers */ background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */ background: linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */ border-color: rgb(179,220,237); text-align: center; padding-top:3px; } </code></pre> <p>Unfortunately I can't host the code online for a demo so I've posted up anything I got. I'm using Google Chrome 17.0.963.56 and Firefox 10.0.2.</p> <p>I'm quite often having trouble with adding jQueryUI effects to my scripts, ending up not adding them. Though there might be some tricks/bugs preventing it from working (e.g. if your DOM node didn't have a class attribute, toggleClass animations wouldn't work).</p> <p>Did I miss something? How would a workaround look like, would I have to iterate through all the child nodes?</p> <p>Thanks in advance!</p> <p>Harti</p>
 

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