JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript">
document.body.className += "js";
</script>
<ul id="memory">
<li><img src="http://www.o315.de/temp/mgi/memory/1.png" width="173" height="173" alt="1" /></li>
<li><img src="http://www.o315.de/temp/mgi/memory/2.png" width="173" height="173" alt="2" /></li>
<li><img src="http://www.o315.de/temp/mgi/memory/3.png" width="173" height="173" alt="3" /></li>
<li><img src="http://www.o315.de/temp/mgi/memory/4.png" width="173" height="173" alt="4" /></li>
<li><img src="http://www.o315.de/temp/mgi/memory/5.png" width="173" height="173" alt="5" /></li>
<li><img src="http://www.o315.de/temp/mgi/memory/6.png" width="173" height="173" alt="6" /></li>
<li><img src="http://www.o315.de/temp/mgi/memory/7.png" width="173" height="173" alt="7" /></li>
<li><img src="http://www.o315.de/temp/mgi/memory/8.png" width="173" height="173" alt="8" /></li>
<li><img src="http://www.o315.de/temp/mgi/memory/9.png" width="173" height="173" alt="9" /></li>
</ul>
CSS
* {
margin: 0;
padding: 0;
}
#memory {
width: 534px;
}
#memory li {
float: left;
width: 173px;
height: 173px;
margin: 0 5px 5px 0;
}
.js #memory li {
background: no-repeat url(http://www.o315.de/temp/mgi/memory/rueckseite.png);
}
.js #memory li img {
display: none;
}
JavaScript
$(document).ready(function() {
// diese zahl ändern um die gewschwindigkeit des einblendens zu regulieren
var fadeMultiplier = 1000;
jQuery.fn.memoryFade = function() {
var randFadeTime = Math.floor(Math.random()*11)*fadeMultiplier;
return this.delay(randFadeTime).animate({opacity: 'toggle'}, randFadeTime, 'swing',function() { $(this).memoryFade() });
};
// alle lis des Memorys schnappen
var $memory = $('#memory li');
if($memory.length) {
for(i=0,I=$memory.length;i<I;i++) {
$currentItem = $($memory[i]);
$currentItem.find('img').memoryFade();
}
}
})