how to animate jquery load()

Question

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

Britney

You could use display:none or opacity:0 in the CSS and do a regular jQuery animation. – Verdin

Answer 1

You have to hide it first.

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

Federative

Answer 2

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.

Enright

That's because you used the .live-steam ul selector. You're selecting each li and doing it at the same time. Were you looking for a different effect? – Enright

Answer 3

what if you call the fadeIn method

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

Prickle

Answer 4

call handler while loading

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

    });  

Ensile

Answer 5

That worked for me without any issues of content flickering:

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

Ami

Answer 6

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

});

Numbat

hmm, i have tried my 2nd code, that work for me, but i don't know if that work too for ya – Numbat

Answer 7

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

Indoiranian

when i do this all li's are blinking every 1 second – Britney

@Ronnie Chester Lynwood Thats because of your setInterval(). You call the function every second ;) What exactly do you want to do? – Indoiranian

im trying to do something like facebook's live user action feed that on the right top of facebook home – Britney

Answer 8

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

    });

Endrin

is there any way to use setInterval for only li's not whole ul? – Britney

Answer 9

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.

Pipit