使用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進行平滑淡入淡出

回答

相關問題