選択した画像をファンシーボックスのように下に拡大して表示するスクリプトをかいていて
順に一つ目、二つ目・・・とクリックしていくときには問題ないのですが
順番をランダムに選択すると若い順でしか動きません。
問題はaddClassかz-indexかliの特性なのかわかりませんが
どなたか原因を教えく下さると助かります。

追伸：こちらの使い方がまた十分にわかっておりませんので見にくいかと思いますがご容赦ください。

<!DOCTYPE htm>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<body>
<div id="wrap">
 <div id="pics">
 <ul>
  <li><a href="#"><img src="1.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="2.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="3.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="4.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="1.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="2.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="3.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="4.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="1.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="2.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="3.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="4.jpg" width=120 height=90></a></li>
 </ul>
 </div>

<div id="slider"></div>

<div id="d_none">
 <ul>
  <li><a href="#"><img src="1.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="2.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="3.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="4.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="1.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="2.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="3.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="4.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="1.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="2.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="3.jpg" width=120 height=90></a></li>
  <li><a href="#"><img src="4.jpg" width=120 height=90></a></li>
 </ul>
 </div>
</div>
</body>
</html>

スタイルシートです

<style type="text/css">
#wrap{      width:500px;}
#pics{      background:#333; width:500px; height:130px; padding:20px; border:1px solid #ccc; overflow:hidden; position:relative;}
#slider{    margin:20px;}
#pics ul{   position:absolute; width:1560px; list-style-type:none; margin:0;left:0; top:20px;}
#pics ul li{    display:inline;}
#pics ul li a{  display:block; float:left; margin:5px; transition:all 0.5s ease;}

.big{       transform:scale(3); z-index;100; position:absolute; top:350; left:200;}
#d_none ul{  width:1560px; list-style-type:none; margin:100;}
#d_none ul li a {display:none; float:left; margin:5px; transition:all 0.5s ease;    }   
</style>

スライドと拡大させたいJavaです。

kekka=0;
$(function(){
  $("#pics ul li a").mouseup(function(e){
      no=$("#pics ul li a").index(this);        
      $("#d_none ul li a").eq(no).css("display","block").addClass("big");
  });

  $("#slider").slider({
    min:0,
    max:130*12-500+20,      
    change:function(e,v){
        //alert(v.value);
        var kekka=v.value*-1;
        $("#pics ul").css("left",kekka);
    }
 });

});