1

我有问题，请帮忙。

我有一个这样的模板：

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

然后我有一个通过jQuery动画扩展dad-div的动作

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

在这一刻，儿子和爸爸都是 800px 宽度，这对我来说很好。

但是当我使用 ajax 从服务器获取新的子元素并替换旧元素时，Safari 和 chrome 上发生了奇怪的事情：

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

展开爸爸脚本仍然有效，但有一些不同之处： 在 IE 和 FireFox 上，爸爸和儿子同时调整了大小，因此效果看起来流畅且良好。但是在 Safari 和 Chrome 上这个过程分为两步，先用动画把爸爸扩大到 800px，然后用“跳跃”变化让儿子到 800px，这个“跳跃”让后面的过程出错。

我觉得 IE 和 FireFox 以正确的方式处理了这个问题，有人可以帮我修复 Safari 和 Chrome 吗？

4

1 回答 1

1

jQuery 没有replace方法，看来你想使用 replaceWith方法。

$('#son').replaceWith(response);

注意replaceWith用另一个元素替换元素，如果你只想改变一个元素的内容，你可以使用html方法。

$('#son').html(function(){
   return $(response).html();
});
于 2013-01-09T05:57:39.240 回答