jQuery滚动div右onmouseover

如何解决jQuery滚动div右onmouseover

我在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\" />

它根本不起作用。     

解决方法

添加到您的CSS类...

position: relative;

更改

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

至

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

那至少使事情动起来了。 演示：http：//jsfiddle.net/g75FS/1/     ,好的，将您的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/