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 guys。

Answer 1

如果没有看到你的标记和css，很难诊断，但可能有效的方法是让你的父级在你制作动画时保持它的高度/宽度。

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

在开始之前这样做：

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

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

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

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

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

Answer 2

也许这可以解决它：
Animation Jump - quick tip
（但是从jQuery 1.3开始修复了这个bug。）

使用JQuery在Ajax之后平滑淡出

2 个答案: