Javascript工具提示不工作，不知道爲什麼

Question

在一個滑塊內我創建的圖像展開並出現工具提示，但由於某種原因，我之前運行的代碼不再有效。完全相同的代碼適用於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住LINK我剛剛完成平面設計課程和一個朋友，他是一個網頁設計師哈哈！

Answer 1

我在這篇文章中添加了一個js小提琴。現在正在工作。轉到此鏈接並查看該工作。 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>