Javascript工具提示不工作，不知道为什么

在滑块中，我创建了可以展开并显示工具提示的图像，但是由于某种原因，我之前的功能代码不再工作。完全相同的代码可以在JSFiddle上工作，但不能在线或本地工作。我不知道为什么。

<ul class="thumb">
<li> <img src="imagewithtooltip.png" width="200" height="229" title="Lorem ipsum dolor     sit amet, consectetur adipiscing elit. Suspendisse tincidunt rhoncus risus sed rhoncus." />    </li>
</ul>

ul.thumb {
float: none;
list-style: none;
margin: 0;
padding: 10px;
width: 360px;
bottom: 5px;
}
ul.thumb li {
margin: 0;
padding: 5px;
float: right;
position: absolute;  /* Set the absolute positioning base coordinate */
width: 200px;
height: 200px;
bottom: 5px;
right: 40%;
}
ul.thumb li img {
width: 200px;
height: 200px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic;
padding: 5px;
position: relative;
left: 0;
top: 0;
}
.hover {
background:url(thumb_bg.png) no-repeat center center;
}
.caption {
background:#ffcc00;
position: absolute;
top: 100%;
left: 0px;
}

<script type="text/javascript">
$("ul.thumb li").hover(function() {
    $(this)
        .css('z-index', '10')
        .find('img').addClass("hover")
        .stop()
        .animate({
            marginTop: '-150px',
            marginLeft: '-150px',
            top: '50%',
            left: '50%',
            width: '300px',
            height: '300px',
            padding: '20px'
        }, 200, function() {
            var $this = $(this),
                h = $this.height();
                $caption = $('<div class="caption">' + this.title  + '</div>')
                              .css('top', h.toString() + 'px');
            $this.after($caption);
        }); 
}, function() {
    $('.caption').remove();
    $(this)
        .css('z-index', '0')
        .find('img').removeClass("hover")
        .stop()
        .animate({
            marginTop: '0',
            marginLeft: '0',
            top: '0',
            left: '0',
            width: '200px',
            height: '200px',
            padding: '5px'
        }, 400);
});

</script>

网页的现场链接在这里，我刚刚和一个朋友完成了平面设计课程，他是一个网页设计师哈哈!