logo标签列表

如何使用jQuery的load()函数实现动画效果

javascriptjquerysetinterval
9

你好，我正在使用这段代码从另一个php文件中加载内容。

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

        });

这段代码本身是正确的，但我想让脚本在添加新记录时淡入每个"li"元素，有什么方法吗？
我想要实现的效果类似于Facebook首页右上角的实时用户动态。
您可以在 CSS 中使用 display:none 或 opacity:0，并进行常规的 jQuery 动画。 - Brigand
9个回答
19

你必须先隐藏它。

$(this).hide().load("tx.php").fadeIn('500');
2
尝试像这样做：

试试这个：

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

});

注意使用 fadeIn() 和 hide() ... 如果你已经将 <li> 隐藏了，就不需要再使用 hide。
这是因为您使用了 .live-steam ul 选择器。您正在同时选择每个 li 并进行操作。您是否正在寻找不同的效果？ - sirmdawg
1

如果你调用fadeIn方法会怎样呢？

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

加载时调用处理程序

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

    });
1

这对我来说没有任何内容闪烁的问题，很好地解决了：

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

你试过这个吗？

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

});
嗯，我已经尝试了我的第二段代码，它对我来说可以工作，但我不知道它是否也适用于你。 - Khairu Aqsara
0

在执行 .fadeIn("1000") 之前，$(this) 会被显示出来。首先你需要隐藏所选元素，加载内容，然后再进行淡入操作，像这样：

$(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);
});
当我这样做时，所有的li元素都会每1秒闪烁一次。 - Ali Demirci
@Ronnie Chester Lynwood，那是因为你使用了setInterval()。你每秒钟都会调用该函数 ;) 你想要做什么？ - frank_neff
我正在尝试做类似Facebook主页右上方的用户动态更新功能。 - Ali Demirci
0
使用回调函数，但通过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);

    });
有没有办法只针对li而不是整个ul使用setInterval？ - Ali Demirci
0

我认为你不能直接在load()函数中使用动画。但这里是我使用的技巧：

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

该元素不显示，只是变成了透明的。它看起来完全一样。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接