Как сделать динамическое добавление и удаление блоков?

Question

[freshik312]

Хочу сделать появление 3х блоков по очереди и кода появлялся 4ый блок, 1ый блок пропадал, т.е что бы пользователь всегда видел только 3 блока. И выводить в них случайную информацию из базы. Подскажите как реализовать, ибо ничего внятного не выходит...

что есть сейчас:

$('document').ready(function () {
        setTimeout(function () {
            setInterval(function () {
                $('.pay_ways').append('<div class="pay_block"><div>');
            }, 2000);
            setInterval(function () {
                $('.pay_block:last-child').detach();
            }, 4000);
        }, 2000);
    })

Answer 1

[Александр]

https://jsfiddle.net/zojv7j0c/

Comments

[freshik312]

в него код из php вставить можно ? просто мне нужно что бы он случайную запись тянул, я для примера сделал так:

$('document').ready(function () {
        var i = 1;
        setInterval(function () {
            if ($('.pay_ways .pay_block').length > 2) {
                $('.pay_ways .pay_block:first').remove();
            }
            $('.pay_ways').append('<div class="pay_block"><? echo rand(1,100) ?><div>');
        }, 2000);
    });

но выводит всегда одно число

[Александр]

freshik312, для динамической загрузки данных придется разбирать ajax.

(function worker() {
    $.ajax({
        url: 'http://mysite.com/mydata', 
        success: function(data) {
            if ($('.pay_ways .pay_block').length > 2) {
                $('.pay_ways .pay_block:first').remove();
            }
            $('.pay_ways').append('<div class="pay_block">'+data+'<div>');
        },
        complete: function() {
            setTimeout(worker, 2000);
        }
    });
})();

setTimeout(worker, 2000);

[freshik312]

Александр, Насколько я понял он вытягивать будет данные из get запроса на определенный сайт ?

[freshik312]

я хочу сделать, что то на подобии steambuy.com, пусть даже без отключения уведомлений.
prntscr.com/i7tmmy

[Александр]

freshik312, Да, в url в коде выше должна быть ссылка на ресурс который будет возвращать, например, рандомную статью.

[freshik312]

Александр, просто через echo ? там же стиль и в разные div распихать можно ?

например mydata:

$str = строка из базы;
echo "<div class='wrapper'>
               <div class='caption'>
                   $str->caption (заголовок)
               </div>
               <div class='describe'>
                   $str->describe (описание)
               </div>
          </div>"

Answer 2

[Максим Тимофеев]

api.jquery.com/queue