how to animate jquery load()

hello im using this code to load content from another php file.

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

        });

this works correctly but i want script to fadeIn each "li" when a new record added, anyone?

the thing i want to do is something like facebook's live user action feed that on the right top of facebook home

You have to hide it first.

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

Try something like this:

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

});

Note the use of fadeIn() and hide()... You don't need hide if you already have the <li>'s hidden.

what if you call the fadeIn method

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

call handler while loading

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

    });

have you tried this one?

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

hmmm, what about this one

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

});

Use the callback but hide the li using CSS display: none; fadeIn should work after that.

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

    });

$(this) is shown before the .fadeIn("1000") will be executed. First you have to hide the selected element, load the content and then fadeIn, like this:

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

});

Or hide the elements with css:

display: none;

EDIT: Should be something like this, but it's not tested...

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

I don't think you can use animation directly on load(). But here is the trick I used:

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

The element doesn't display, just becomes transparent. It looks just the same.

来源：https://stackoverflow.com/questions/8493879/how-to-animate-jquery-load

标签

javascript

jquery

setinterval