如何為 jquery load() 設置動畫

Question

你好，我使用此代碼從另一個 php 文件加載內容。

$(document).ready(function(){
           setInterval(function(){
                               $('.live-stream ul').each(function(){
                                    $(this).load('tx.php');
                        });
                }, 1000);

        });  

這工作正常，但我希望腳本在添加新記錄時淡入每個“li”，有人嗎？

我想做的事情就像 Facebook 主頁右上角的 facebook 實時用戶操作提要一樣

Answer 1

你必須先隱藏它。

$(this).hide().load("tx.php").fadeIn('500');

Answer 2

嘗試這樣的事情：

$(document).ready(function(){
     setInterval(function(){
        $('.live-stream ul').each(function(){
           $(this).hide().load('tx.php').fadeIn('500');
        });
     }, 1000);

});  

注意fadeIn()和hide() ......如果您已經隱藏了<li>則不需要隱藏。

Answer 3

如果你調用fadeIn方法會怎樣

$(this).load('tx.php').fadeIn(400);

Answer 4

加載時調用處理程序

$(document).ready(function(){
    setInterval(function(){
         $('.live-stream ul').each(function(){
                $(this).load('tx.php', function(){
                         $('li').fadeIn("normal");
                            });
                 });
        }, 1000);

    });  

Answer 5

我認為您不能直接在 load() 上使用動畫。 但這是我使用的技巧：

$("#id").animate({opacity: 0},1000);
$("#id").load(url);
$("#id").animate({opacity: 1},1000);

該元素不顯示，只是變得透明。 它看起來是一樣的。

Answer 6

這對我有用，沒有任何內容閃爍問題：

const pageLink = '/...'
const $container = $("#page-content")
$container.hide().load(pageLink, () => {
    $container.fadeIn(500)
});

Answer 7

你試過這個嗎？

$(document).ready(function(){
    setInterval(function(){
        $('.live-stream ul').each(function(){
            $(this).load('tx.php').fadeIn('1000');
        });
    }, 1000);
});

嗯，這個怎么樣

$(function(){
//Fade in all objects.
var wrapper = $("live-stream ul");
$(wrapper).hide();

function fadeInAll(elem, fadeInTime, timeBetween)
{
    for(i=0; i<elem.size(); i++)
    {
        $(elem[i]).delay(i*(timeBetween+fadeInTime)).fadeIn(fadeInTime);    
    }
}

fadeInAll($(wrapper), 1000, 500);

});

Answer 8

$(this) 在 .fadeIn("1000") 執行之前顯示。 首先，您必須隱藏所選元素，加載內容，然后淡入淡出，如下所示：

$(document).ready(function(){
   setInterval(function(){
       $('.live-stream ul').each(function(){
           $(this).hide().load('tx.php').fadeIn("1000");
       });
   }, 1000);

});  

或者用css隱藏元素：

display: none;

編輯：應該是這樣的，但它沒有經過測試......

$(document).ready(function(){
   setInterval(function(){
       var streamListElement = $(document.createElement("li")).load('tx.php').hide();
       $('.live-stream ul').append( streamListElement ).find(":hidden").fadeIn("3000");
   }, 1000);
});

Answer 9

使用回調但使用 CSS display: none;隱藏 li 淡入應該在那之后工作。

$(document).ready(function(){
    setInterval(function(){
         $('.live-stream ul').each(function(){
                $(this).load('tx.php', function(){
                         $(this).find('li').fadeIn();
                            });
                 });
        }, 1000);

    });