<script>
$(function(){
// リストのランダム並べ替え
var rdmList = $('#thumblist ul li'),
listParent = $('#thumblist ul'),
array = [];
rdmList.each(function(){
array.push($(this).html());
});
array.sort(function() {
return Math.random() - Math.random();
});
listParent.empty();
for(i=0; i < array.length; i++) {
listParent.append('<li>' + array[i] + '</li>');
}
// リストのランダム表示
var setElm = $('#thumblist img'),
delaySpeed = 100,
fadeSpeed = 500;
$(window).load(function(){
randomShow();
function randomShow(){
var elmLength = setElm.length,
randomSet = Math.floor(Math.random()*elmLength);
$(setElm[randomSet]).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
setElm.splice(randomSet,1);
if (elmLength > 0) {
setTimeout(function(){randomShow();},delaySpeed);
} else {
return false;} }
/*ここまでがランダムで画像フェードインとあり、フェードアウトさせる記述を以下のように
しても消せない。*/
// リストのランダム表示
var maxNum = 25,
rdm = Math.floor(Math.random()*(maxNum)) + 1;
$('#thumblist img').mousemove(function(){
$('#thumblist img').fideOut(function(){('.view'+rdm)});
});}); });
</script>
</head>
<body>
<h1>jQuery RandomLoad</h1>
<div id="container">
<div id="thumblist">
<ul>
<li><a href="#"><img src="img/photo1.jpg" alt="" class="view1"/></a></li>
<li><a href="#"><img src="img/photo2.jpg" alt="" class="view2"/></a></li>
<li><a href="#"><img src="img/photo3.jpg" alt="" class="view3"/></a></li>
<li><a href="#"><img src="img/photo4.jpg" alt="" class="view4"/></a></li>
<li><a href="#"><img src="img/photo5.jpg" alt="" class="view5"/></a></li>
<li><a href="#"><img src="img/photo6.jpg" alt="" class="view6"/></a></li>
<li><a href="#"><img src="img/photo7.jpg" alt="" class="view7"/></a></li>
<li><a href="#"><img src="img/photo8.jpg" alt="" class="view8"/></a></li>
<li><a href="#"><img src="img/photo9.jpg" alt="" class="view9"/></a></li>
<li><a href="#"><img src="img/photo10.jpg" alt="" class="view10"/></a></li>
<li><a href="#"><img src="img/photo11.jpg" alt="" class="view11"/></a></li>
<li><a href="#"><img src="img/photo12.jpg" alt="" class="view12"/></a></li>
<li><a href="#"><img src="img/photo13.jpg" alt="" class="view13"/></a></li>
<li><a href="#"><img src="img/photo14.jpg" alt="" class="view14"/></a></li>
<li><a href="#"><img src="img/photo15.jpg" alt="" class="view15"/></a></li>
<li><a href="#"><img src="img/photo16.jpg" alt="" class="view16"/></a></li>
<li><a href="#"><img src="img/photo17.jpg" alt="" class="view17"/></a></li>
<li><a href="#"><img src="img/photo18.jpg" alt="" class="view18"/></a></li>
<li><a href="#"><img src="img/photo19.jpg" alt="" class="view19"/></a></li>
<li><a href="#"><img src="img/photo20.jpg" alt="" class="view20"/></a></li>
<li><a href="#"><img src="img/photo21.jpg" alt="" class="view21"/></a></li>
<li><a href="#"><img src="img/photo22.jpg" alt="" class="view22"/></a></li>
<li><a href="#"><img src="img/photo23.jpg" alt="" class="view23"/></a></li>
<li><a href="#"><img src="img/photo24.jpg" alt="" class="view24"/></a></li>
<li><a href="#"><img src="img/photo25.jpg" alt="" class="view25"/></a></li>
</ul>
</div><!--/#thumblist-->
</div><!--/#container-->
コードはコードブロックをご利用ください。また、なるべく質問テンプレートにそって書くようにしてください。(読みやすいように書くことで自身のやりたいこと・やってみたことが正しく伝わり、結果、早く解決します)https://teratail.com/help/question-tips#questionTips3-8