交叉淡化图像的控制按钮不起作用

Question

我正在努力实现链接http://css3.bradshawenterprises.com/cfimg/#cfimg7中演示6中显示的内容，但图像2和图像3控件无法正常工作

html

 <div id="cf7" class="shadow">
  <img class='opaque' src="http://wallpaper-download.net/wallpapers/flower-wallpapers-        beautiful-colorful-flowers-wallpaper-33556.jpg" />

<img  src="http://3.bp.blogspot.com/-    zBIIuzYBGPk/UT6p_auvNCI/AAAAAAAAADI/g8fYttW_tZ4/s320/white-azalea.JPG" />
  <img src="http://upload.wikimedia.org/wikipedia/en/7/77/Blue_Flowers.jpg" />
  <img src="http://i5.minus.com/iE7HaPaT9tU4Z.jpg" />
</div>
<p id="cf7_controls">
  <span class="selected">Image 1</span>
  <span >Image 2</span>
  <span >Image 3</span>
  <span >Image 4</span>
</p>

CSS

p#cf7_controls {
  text-align:center;
}
#cf7_controls span {
  padding-right:2em;
  cursor:pointer;
}
#cf7 {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto 10px;
}
#cf7 img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
   opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
 }

#cf7 img.opaque {
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}

我在html中输入了javascript代码，所以我想粘贴确切的东西。

$(document).ready(function() {

    $("#cf7_controls").on('click', 'span', function() {
        $("#cf7 img").removeClass("opaque");
        var newImage = $(this).index();
        $("#cf7 img").eq(newImage).addClass("opaque");
        $("#cf7_controls span").removeClass("selected");
        $(this).addClass("selected");
    });

});