safari and chrome handle newly added element in a strange way

safari and chrome handle newly added element in a strange way

Hi, everyone, NiHao!

I got a problem, please help.

I have a template like this:

  1. <div id="dad"> <div id="son" style="width: 100%"> some code </div> </div>

then I have an action of expand the dad-div by jquery animation

  1. $('#dad').animation({'width': 800px}, 500);

on this moment, the son and the dad both 800px width, which is fine for me .

but strange things happened on safari and chrome when i use ajax fetch a new son element from server and replace the old one:

  1.  $.get(url, extraData, function(response) { $('#son').hide('slide', null, 500, function(){ $('#son').replaceWith(response); $('#son').show('slide', {direction: 'right'}, 500); }); });

The expand dad script still work, but here are some differents: On IE and FireFox, the dad and son were resized simultaneously, so the effect seems smooth and good. But on the safari and chrome this process is divided in two steps, first expand dad to 800px with animation, and then make the son to 800px with a "jump" change, and this "jump" make later process wrong.

I feel IE and FireFox handled this in a right fashion, could any one help me fix the safari and chrome?

xiexie!