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

Question

在一个 slider 中，我创建了可展开并显示工具提示的图像，但由于某种原因，我以前运行的代码不再起作用。完全相同的代码适用于 JSFiddle，但不适用于在线或本地。我不知道为什么。

HTML

<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>

CSS

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;
}

Javascript

<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>

网页实时链接IS HERE我刚和一个 friend 一起完成了平面设计类(class)，他是一名网页设计师哈哈!

Answer 1

我在这篇文章中添加了一个 js fiddle。那现在正在工作。转到此链接并查看正在运行的内容。 http://jsfiddle.net/kabircse/RNt6Z/

将您的 java 脚本代码用作:

<script type="text/javascript">
  $(function(){
      $("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>