jQuery: creare un effetto di assolvenza e dissolvenza su un elemento casuale

In questo articolo vedremo come far apparire o scomparire un box in maniera casuale utilizzando un evento click con jQuery.

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, $( ".box", "#wrapper" ).length );
			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 );