使用jQuery Ajax进行平滑淡入淡出

我正在使用jquery ajax更改网页中的页面。我的代码是这样的：使用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家伙。

来源

2010-12-05 AliBZ

这很难，没有看到您的标记和CSS来诊断，但什么可能的工作是使目标的父项在动画时保持其高度/宽度。

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

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

然后你就可以调用成功块内的同一代码：

，然后再开始执行此操作。

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

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

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

来源

2010-12-05 19:07:15

Thanx男人，我没有使用你的代码，但我写了一个关于设置父母的宽度和高度的想法的代码。我在目标周围创建了一个新的div，并使用Ajax更改了它的宽度和高度。 Thanx;） – AliBZ 2010-12-05 20:08:11

也许这可以解决这个问题：
Animation Jump - quick tip
（但这个错误是因为jQuery的1.3固定）

来源

2010-12-05 15:47:09 Sk8erPeter

我有JQuery版本v1.4.4。但我认为这不会解决我的问题。 – AliBZ 2010-12-05 16:56:09

使用jQuery Ajax进行平滑淡入淡出

回答

相关问题