Come faccio a far apparire o scomparire gli elementi in modo casuale con jQuery?

Come faccio a far apparire o scomparire gli elementi in modo casuale con jQuery?

Ricevo spesso molte richieste d'aiuto su problemi da risolvere con jQuery. Una delle ultime è stata: come faccio a far apparire o sparire un box in maniera casuale utilizzando un evento click? Ecco la mia soluzione.

Si tratta di generare un numero casuale da usare come indice per il metodo .eq(). Il numero deve essere compreso tra zero ed il numero massimo di elementi (meno uno, poiché gli elementi seguono l'ordinamento degli array):


(function( $ ) {
	$.randomize = function( min, max ) {
		return Math.floor( Math.random() * ( max - min + 1 ) + min );
	};

	$(function() {
		$( "#action" ).click(function() {
			var index = $.randomize( 0, 4 );
			var $box = $( ".box", "#wrapper" ).eq( index );
			if( parseInt( $box.css( "opacity" ), 10 ) == 1 ) {
				$box.animate({
					opacity: 0
				}, 500);
			} else {
				$box.animate({
					opacity: 1
				}, 500);
			}

		});

	});

})( jQuery );

Torna su