Question

您好我正在使用此代码从另一个php文件加载内容。

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

        });

这个工作正常，但是我希望脚本在添加新记录时，每个“li”淡出，有人吗？

我想做的事情就像Facebook的主页用户动作Feed一样位于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

你试过这个吗？

$(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 6

在执行.fadeIn（“1000”）之前显示

$（this）。首先，你必须隐藏所选元素，加载内容然后fadeIn，如下所示：

$(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 7

使用回调但是使用CSS隐藏li display: none;之后fadeIn应该可以正常工作。

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

    });

Answer 8

我认为你不能直接在load（）上使用动画。但这是我使用的技巧：

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

元素不显示，只是变得透明。它看起来一样。

Answer 9

这对我有用，没有任何内容闪烁的问题：

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

如何动画jquery load（）

9 个答案: