Databases
StackOverflow2013
Postsdbo
POProblem: jQuery snaps div left while animating
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProblem: jQuery snaps div left while animating
    text
    copied!<p>I have a div that I am trying to swap out for another div with a clip effect. However, when I do this in Firefox it snaps the content left while the animation is happening and then returns it to the center upon completion.</p> <p>It works as expected in IE6 (gasp! still the standard at my work, campaigning to update), but not in firefox.</p> <p>What am I doing wrong?</p> <p>Javascript:</p> <pre><code>&lt;script type="text/javascript"&gt; $(function(){ $("#editEmpInfo").click(function(){ $("#selectedEmployee").hide("clip", { direction: "vertical" }, 500, function() { $("#editSelectedEmployee").show("clip", { direction: "vertical" }, 500); }); }); $("#saveEmpInfo").click(function(){ $("#editSelectedEmployee").hide("clip", { direction: "vertical" }, 500, function() { $("#selectedEmployee").show("clip", { direction: "vertical" }, 500); }); }); }); &lt;/script&gt; </code></pre> <p>HTML:</p> <pre><code>&lt;div class="container"&gt; &lt;div id="selectedEmployee" class="container400"&gt; &lt;div class="currentEmp"&gt; &lt;div class="currentEmpName"&gt; Last, First &lt;br /&gt; &lt;span class="empWorkUnit"&gt;Work Unit&lt;/span&gt; &lt;/div&gt; &lt;div id="editEmpInfo"&gt;&lt;a title="Edit" href="#"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="currentEmpInfo"&gt; &lt;div&gt;Ext: &lt;/div&gt; &lt;div&gt;Cell: &lt;/div&gt; &lt;div&gt;Home: &lt;/div&gt; &lt;div&gt;Pager: &lt;/div&gt; &lt;div&gt;Other: &lt;/div&gt; &lt;div&gt;Notes: &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="editSelectedEmployee" class="container400 hidden"&gt; &lt;div class="currentEmp"&gt; &lt;div class="currentEmpName"&gt; Last, First &lt;br /&gt; &lt;span class="empWorkUnit"&gt;Work Unit&lt;/span&gt; &lt;/div&gt; &lt;div id="saveEmpInfo"&gt;&lt;a title="Save" href="#"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="currentEmpInfo"&gt; &lt;div&gt;Ext: &lt;/div&gt; &lt;div&gt;Cell: &lt;/div&gt; &lt;div&gt;Home: &lt;/div&gt; &lt;div&gt;Pager: &lt;/div&gt; &lt;div&gt;Other: &lt;/div&gt; &lt;div&gt;Notes: &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>body { font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif; font-size: 12px; } .container { margin-left: auto; margin-right: auto; text-align: center; } .container400 { width: 400px; margin-left: auto; margin-right: auto; text-align: left; } .hidden { display: none; } .currentEmp { border: solid 1px #CCCCCC; display: block; padding: 10px; } #selectedEmployee { background: #EEEEEE; } #editSelectedEmployee { background: #E8EDFF; } .currentEmpName { font-size: 18px; color: #0077D4; float: left; } .currentEmpName .empWorkUnit { font-style: italic; font-size: 14px; font-weight: normal; color: #000000; } #editEmpInfo a{ display: block; background: url("../images/Edit.png") no-repeat; width: 32px; height: 32px; margin: 5px; float: right; } #upOneLevel a{ display: block; background: url("../images/Up.png") no-repeat; width: 32px; height: 32px; margin: 5px; float: right; } #saveEmpInfo a{ display: block; background: url("../images/Save.png") no-repeat; width: 32px; height: 32px; margin: 5px; float: right; } .currentEmpInfo { clear: both; } #callSheet { border-collapse: collapse; font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif; font-size: 12px; margin: 20px; text-align: left; min-width: 700px; margin-left: auto; margin-right: auto; } #callSheet th { background: none repeat scroll 0 0 #B9C9FE; color: #003399; font-size: 13px; font-weight: normal; padding: 8px; text-align: center; } #callSheet td { background: none repeat scroll 0 0 #E8EDFF; border-top: 1px solid #FFFFFF; color: #666699; padding: 8px; } #callSheet tbody tr:hover td { background: none repeat scroll 0 0 #D0DAFD; } </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