CODEWITHSUNDEEP
jqueryrandompositionfading
Sly
Sly

Reputation: 39

Random position of fading list items

This code fades list items in and out nicely. But I'd like the list items to be positioned randomly within a div

$(function () {
    var list_slideshow = $("#site_slideshow_inner_text"),
        listItems = list_slideshow.children('li'),
        listLen = listItems.length,
        i = 0,
        changeList = function () {
            listItems.eq(i).fadeOut(300, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(300);
            });
        };
    listItems.not(':first').hide();
    setInterval(changeList, 1000);
});

What can I add to this to get random positioning?

Upvotes: 1

Views: 443

Answers (1)

Sionnach733
Sionnach733

Reputation: 4736

Something like this should get you started, you need to provide more info in the question to get a better answer, ie. what you've tried with code examples.

$('li').each(function(){
var randomTop = $('div').height()*Math.random(); //random top position
var randomLeft = $('div').width()*Math.random(); //random left position

$(this).css({ //apply the position each li
        top        : randomTop,
        left    : randomLeft
    });
});

FIDDLE

Upvotes: 1

Related Questions