使用JQuery在Ajax之后平滑淡入淡出

Question

我正在使用jquery ajax来更改我网站中的页面。 我的代码是这样的：

$('#'+target).fadeOut('slow', function(){
        $('#' + target).children().remove().end().append('<div style="width:' + loadingImageWidth + 'px;height:' + loadingImageHeight + 'px;background-color:black;-moz-border-radius:15px;"></div>');
        $('#'+target).fadeIn('slow', function(){
            $.ajax({
                type: type,
                url: url,
                success: function(msg){
                    $('#'+target).fadeOut('slow', function(){
                        $('#'+target).html(msg);
                        $('#'+target).fadeIn('slow', function(){});
                    });
                }
            });
        });
    });

我的问题是，当我使用淡入淡出效果时，“＃target” div的宽度和高度会发生变化，因此，我的页面的滚动发生了变化，这确实很烦人，因为页面似乎在上下跳跃！ 我想知道如何使用平滑效果的JQuery淡入淡出。 thanx的家伙。

Answer 1

不查看标记和CSS很难诊断，但是可行的方法是使目标对象的父对象在设置动画时保持其高度/宽度。

您可以通过在淡入淡出之前将父级的尺寸设置为目标的高度来实现，然后在淡入淡出完成时更新父级的尺寸。

在开始之前执行此操作：

$('#'+target).parent().height($('#'+target).height()).width($('#'+target).width());

然后你可以在成功块中调用相同的代码。

PS作为性能提示，字符串连接和dom搜索非常昂贵，最好缓存目标并在整个代码中使用它。 例如：

var target = $('#'+target);
target.fadeOut('slow');

然后，您只执行连接和查找一次，并在整个代码中使用相同的引用。

Answer 2

也许这可以解决它：
动画跳转-快速提示
（但自从jQuery 1.3以来，这个bug已得到修复。）