0

我已经设法编写了一些 jquery 随机淡入和淡出一组 div 一个接一个，但我想要做的是一次淡入/淡出多个 div。

这是我当前的js：

(function makeDiv(){

var ids = [1,2,3,4,5,6,7,8,9];
var imgid = ids[Math.floor(Math.random() * ids.length)];
var divsize = 120;


$newdiv = $('<div/>').css({
    'width':divsize+'px',
    'height':divsize+'px'
}).attr('id', 'img'+imgid+'');

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(500).delay(500).fadeOut(500, function(){
   $(this).remove();
   makeDiv(); 
}); 
})();

您可以在 www.vouchrs.com 上看到它的实际效果。

如何一次实现多个淡入/淡出？谢谢

4

3 回答 3

1

它会是这样的：

$(".something").click(function(){
   $(".divsToFadeInOrOut").each().fadeToggle();
});

我认为这应该可以满足您的需求。

于 2012-06-15T23:45:58.123 回答
0

您正在调用 makeDiv 完成淡入，此时延迟淡出链。您可以在没有所有链接的情况下在循环中执行“appendTo”，然后使用选择器并行调用该链。我建议向新的 div 添加一个类，以使编写选择器更容易。

于 2012-06-15T23:41:13.227 回答
0

你也可以做这样的事情

(函数 makeDiv(){

var ids = [1,2,3,4,5,6,7,8,9];

var imgid1 = ids[Math.floor(Math.random() * ids.length)];
var divsize = 120;
var imgid = ids[Math.floor(Math.random() * ids.length)];
var idP = '';


$newdiv = $('<div/>').css({
    'width':divsize+'px',
    'height':divsize+'px'
}).attr('id', 'img'+imgid+'');

 $newdiv1 = $('<div/>').css({
    'width':divsize+'px',
    'height':divsize+'px'
}).attr('id', 'img'+imgid1+'');


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

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


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

 $newdiv1.css({
    'position':'absolute',
    'left':posx1+'px',
    'top':posy1+'px',
    'display':'none'
}).appendTo( 'body' ).fadeIn(500).delay(500).fadeOut(500, function(){
   $(this).remove();
   makeDiv(); 
});

})();

您可以编写函数来生成多个 div，就像我给出的同时生成两个 div 的示例一样，我手动完成了此操作，但您可以创建一个生成多个 div 的函数，最后您可以调用 makediv() 函数。

于 2012-06-16T00:54:10.883 回答