Переверните div, используя таймер

Question

У меня есть квадратный DIV (300px x 300px), который я хочу переворачивать каждые 5 секунд, используя таймер. Я хочу использовать jQuery flip плагин для этого. Вот что у меня есть:

http://jsfiddle.net/psivadasan/4dPaX/3/

Ценю любую помощь.

Answer 1

Неважно что вы хотите периодически запускать в JavaScript, вы можете использовать setInterval.В случае вашего флип-кода:

setInterval(
    function() {
        $('#flipbox').flip({
                    direction: 'tb',
                    bgColor: '#FFFFF',
                    color: '#000000',
                    speed: 500,
                    content: "Hello World!"
                });
    },
    5000);

Answer 2

Вы не включаете никаких библиотек в свой jsfiddle, поэтому он не будет работать. Но основная идея состоит в том, чтобы поместить флип-код в интервал:

var $flipBox  = $('#flipbox'),
    flip_opts = [{
        direction: 'tb',
        bgColor: '#FFFFF',
        color: '#000000',
        speed: 500,
        content: "Hello World!"
    },
    {
        direction: 'tb',
        bgColor: '#FFFFF',
        color: '#000000',
        speed: 500,
        content: "Goodbye World!"
    }],
    curr_indx = 0,
    timer     = setInterval(function () {
        if (curr_indx >= flip_opts.length) {
            curr_indx = 0;
        }
        $flipBox.flip(flip_opts[curr_indx]);
        curr_indx++;
    }, 5000);

Переменная flip_opts - это массив объектов, каждый объект - это набор опций, которые нужно передать плагину flip. Этот код будет проходить через каждый набор параметров по порядку, а затем возвращаться к началу.

Если вы хотите остановить интервал, вы можете позвонить: clearInterval(timer);