隨機位置的文本Fadein / Fadeout

Question

我正在嘗試整理一個網頁，其中包含在頁面上隨機位置彈出的文本，淡出，然后再次出現在隨機位置。 我發現了一些適合我目的的東西。 我想要這樣的東西，但是如果需要的話，我可以操作文本並使用文本陰影效果制作列表。

(function makeDiv(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
    'width':divsize+'px',
    'height':divsize+'px',
    'background-color': color
});

var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

$newdiv.css({
    'position':'absolute',
    'left':posx+'px',
    'top':posy+'px',
    'display':'none'
}).appendTo( 'body' ).fadeIn(100).delay(300).fadeOut(200, function(){
   $(this).remove();
   makeDiv(); 
}); 

}）（）;

小提琴

這是類似事物的第二個例子，只是它沒有隨機位置。

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

小提琴

我希望將兩者拼接在一起，以便得到我理想的東西。 請忘記格式化，這是我第一次在這里，我正在努力遵守標准。

Answer 1

我不確定我是否理解你正在尋找什么，但我“將它們拼接在一起。”

小提琴

(function fadeInDiv(){
    var divs = $('.fadeIn');
    var divsize = ((Math.random()*100) + 50).toFixed();
    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
    var maxSize = 30;
    var minSize = 8;
    var size = (Math.random()*maxSize+minSize)

    var elem = divs.eq(Math.floor(Math.random()*divs.length));

    if (!elem.is(':visible')){
        elem.fadeIn(Math.floor(Math.random()*1000),fadeInDiv);
        elem.css({
            'position':'absolute',
            'left':posx+'px',
            'top':posy+'px',
            'font-size': size+'px'
        });
    } else {
        elem.fadeOut(Math.floor(Math.random()*1000),fadeInDiv); 
    }
})();

編輯：更新了小提琴網址