jQuery的滚动DIV正确的onmouseover

Question

我有一个div旁的右箭头图像，

所有我想要的是在div滚动到权当鼠标移动到右箭头它

继承人旁边我jQuery的：

$(document).ready(function() { 

    $(".thumbs-right").hover(function() { 

     $(this).attr("src","images/arrow-big-right-h.png"); 
     $('.thumbs').animate({scrollRight: 20 + 'px'}, 600); 

    }, function() { 

     $(this).attr("src","images/arrow-big-right.png"); 

    }); 

}); 

继承人的CSS：

.thumbs { 
    float: left; 
    width: 500px; 
    height: 150px; 
    background: red; 
    overflow: hidden; 
} 

和HTML：

<div class="thumbs"> 

     <img src="images/thumb.png" alt="thumb" /> 
     <img src="images/thumb.png" alt="thumb" /> 
     <img src="images/thumb.png" alt="thumb" /> 
     <img src="images/thumb.png" alt="thumb" /> 
     <img src="images/thumb.png" alt="thumb" /> 
     <img src="images/thumb.png" alt="thumb" /> 
     <img src="images/thumb.png" alt="thumb" /> 
     <img src="images/thumb.png" alt="thumb" /> 
     <img src="images/thumb.png" alt="thumb" /> 
     <img src="images/thumb.png" alt="thumb" /> 

    </div> 

    <img src="images/arrow-big-right.png" alt="right arrow" class="thumbs-right" /> 

它根本不起作用。

Answer 1

添加到您的CSS类.. 。

position: relative; 

变更

$('.thumbs').animate({scrollRight: 20 + 'px'}, 600); 

要

$('.thumbs').animate({ left: '20px' }, 600); 

这把事情至少移动。

演示：http://jsfiddle.net/g75FS/1/

Answer 2

确定修复你的CSS这样的：

.thumbs { 
    float: left; 
    width: 500px; 
    height: 150px; 
    background: red; 
    overflow: hidden; 
} 

.thumbs img { 
    position: relative; 
} 

和JS这样：

$(".thumbs-right").hover(function() { 

    $(this).attr("src","images/arrow-big-right-h.png"); 
    $('.thumbs img').animate({right:"+=20px"}, 600); 
}, function() { 
    $(this).attr("src","images/arrow-big-right.png"); 

}); 

，这里是工作提琴：http://jsfiddle.net/maniator/EfTCz/