如何讓這個div有懸停效果？

Question

我想在我的頁面上獲得div來產生懸停效果。我相信我已經正確編碼它，它只是不工作。這是我的代碼。

感謝您提前提供所有幫助！

Click here for a JSfiddle of my problem.

使用Javascript -

$(document).ready(function(){ 

$(function() { 
    function creeperFloat() { 
     $('.creeper').animate({ 
      left: '+=35', 
      top: '+=25' 
     }, 4500).animate({ 
      left: '-=35', 
      top: '-=25' 
     }, 4500, creeperFloat); 
    } 

    creeperFloat(); 
}); 
creeperFloat(); 
}); 

HTML -

<div class="creeper"> 
    </div> 

CSS -

.creeper { 
    background: transparent url(http://s14.postimg.org/bsrst8btt/spacecreep.png) 50% 0 no-repeat; 
    position: absolute; 
    width: 300px; 
    height: 200px; 
    top: 175px; 
    left: 58%; 
    z-index:5; 
    display:block; 
} 

Answer 1

在你的小提琴，你還沒有加載jQuery框架您功能無法訪問。 Here's a fixed Fiddle和功能本身：

$(function(){ 
function creeperFloat() { 
     $('.creeper').animate({ 
      'left': '+=35', 
      'top': '+=25' 
     }, 4500).animate({ 
      'left': '-=35', 
      'top': '-=25' 
     }, 4500, creeperFloat); 
    } 
creeperFloat(); 
});