0

一連の div を次々とランダムにフェードインおよびフェードアウトする jquery を作成できましたが、複数の 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(){

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

})();

2 つの div を同時に生成する例を示したように、複数の div を生成する関数を記述できます。これは手動で行いましたが、複数の div を生成する関数を作成し、最後に makediv() 関数を呼び出すことができます。

于 2012-06-16T00:54:10.883 に答える
0

現時点では、fadeIn の完了時に makeDiv を呼び出して、fadeOut チェーンを遅延させています。チェーンをまったく使用せずにループ内で「appendTo」を実行し、セレクターを使用してそのチェーンを並行して呼び出すことができます。セレクターの記述を容易にするために、新しい div にクラスを追加することをお勧めします。

于 2012-06-15T23:41:13.227 に答える