自動滾動圖像高於容器上的懸停

Question

我想要一個腳本/ CSS懸停在比它所在的容器更高的圖像將在容器內自動滾動，並將在懸停出來時回到原來的位置。 我真的很糟糕的JavaScript仍然我找到了一個代碼，但它似乎並沒有工作。

的HTML

<span class="komal dhiraj"> 
<img width="300px" height="auto" src="http://dribbble.s3.amazonaws.com/users/197532/screenshots/1145931/freebie-1.png" style="top: 0px" /></span> 

的CSS

.komal { 
border-radius: 5px 5px 5px 5px; 
float: left; 
height: 80px; 
margin-left: 3px; 
overflow: hidden; 
position: relative; 
width: 300px; 
border:5px solid #DDD;} 
img { 
position: absolute; 
transition: top 1s ease-out 0s;} 

的JS

$(document).ready(function() { 
var xH 
$('.dhiraj').hover(
function() { 
xH = $(this).children("img").css("height"); 
xH = parseInt(xH); 
xH = xH - 150; 
xH = "-" + xH + "px"; 
$(this).children("img").css("top",xH); 
}, function() { 
$(this).children("img").css("top","0px"); 
} 
); 
}); 

我在http://jsfiddle.net/VuTYx/1/

創造的jsfiddle一個小例子請幫幫我。

Answer 1

你的JS似乎一直在工作，但代碼包含jQuery，而小提琴沒有啓用jQuery。我啓用了jQuery和它看起來像你描述的工作：通過添加類似http://jsfiddle.net/VuTYx/2/

確保jQuery是正確包含在你的項目：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

Answer 2

不需要jQuery的只有使用CSS

看這link

唯一的CSS：

.komal { 
border-radius: 5px 5px 5px 5px; 
float: left; 
height: 80px; 
margin-left: 3px; 
overflow: hidden; 
position: relative; 
width: 300px; 
border:5px solid #DDD; 
} 
img { 
position: absolute; 
transition: all 0.2s ease 0s; 
} 

.komal:hover >img 
{ 
-moz-animation: border-bounce 3000ms linear; 
-webkit-animation: border-bounce 3000ms linear; 
} 
@-moz-keyframes border-bounce { 
0% { margin-top: -10px; } 
25% { margin-top: -50px; } 
50% { margin-top: -100px; } 
75% { margin-top: -50px; } 
100% { margin-top: -0px; } 
} 
@-webkit-keyframes border-bounce { 
0% { margin-top: -10px; } 
25% { margin-top: -50px; } 
50% { margin-top: -100px; } 
75% { margin-top: -50px; } 
100% { margin-top: -0px; } 
}