css轉換 - 爲什麼這不起作用？

我有這樣的CSS3過渡代碼：http://jsfiddle.net/uRxKg/css轉換 - 爲什麼這不起作用？

CSS：

body, html { 
    height: 100%; 
    margin: 0; 
} 

.container { 
    position:relative; 
    height: 100%; 
    width: 100%; 
    background-color: black; 
} 

.shrink { 
    height: 0px; 
    width: 0px; 
    position: absolute; 
    right: 0; 
    -webkit-transition: opacity 4s ease-in-out; 
    -moz-transition: opacity 4s ease-in-out; 
    -o-transition: opacity 4s ease-in-out; 
    transition: opacity 4s ease-in-out; 
} 

.shrink.active { 
    height: 100%; 
    width: 100%; 
}

HTML：

<!doctype html> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/> 
     <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> 
     <script type="text/javascript" src="js/index.js"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <img class="shrink active" src="http://dummyimage.com/1050x750/ffffff/0011ff.jpg&text=image1" /> 
      <img class="shrink" src="http://dummyimage.com/1050x750/ffffff/0011ff.jpg&text=image2" /> 
      <img class="shrink" src="http://dummyimage.com/1050x750/ffffff/0011ff.jpg&text=image3" /> 
     </div> 
     <button id="prev">prev</button> 
     <button id="next">next</button> 
    </body> 
</html>

JS：

$(function() { 
    $("#next").click(function() { 
     var active = $(".active"); 
     var next = active.next(); 
     if (next.length > 0) { 
      active.removeClass("active"); 
      next.addClass("active"); 
     } 
    }); 
    $("#prev").click(function() { 
     var active = $(".active"); 
     var prev = active.prev(); 
     if (prev.length > 0) { 
      active.removeClass("active"); 
      prev.addClass("active"); 
     } 
    }); 
});

當我點擊下一個或上一個，上活動圖像應顯示過渡，但不是。我在想什麼？

來源

2012-11-18 Naor