Question

大家，NiHao！

我遇到了问题，请帮忙。

我有一个这样的模板：

<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吗？

斜斜！

Answer 1

jQuery没有replace方法，似乎你想使用replaceWith方法。

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

请注意，replaceWith将元素替换为另一个元素，如果您只想更改元素的内容，则可以使用html方法。

$('#son').html(function(){
   return $(response).html();
});

safari和chrome无法处理新添加的元素

1 个答案: