如何使用jQuery动画滚动

Question

I'm trying to make some buttons work here. http://www.sepulturaimpex.ro/portofoliu is the website.

When i click left/right buttons i'd like to move from project to project exactly

The images are random width.

How can i achieve that?

Here is the script i'm using.

$(document).ready(function () {
    $(".prev").click(function () {
        $(".p_horizontal_wrap").animate({
            scrollLeft: "-=700"
        })
    }), $(".next").click(function () {
        $(".p_horizontal_wrap").animate({
            scrollLeft: "+=700"
        })
    })
}),

Answer 1

The answer is in your question; if the images are random width, then you cannot scroll w/ a fixed width

I think your best bet is to look ahead and find the x position of the next object, then scroll to that. Depending on your markup, you may need to keep track of the object index you're scrolling into view.

Your next button (and your next/prev could be the same) would look like this:

$(".next").click(function() {
    var targ = /** find out the next item to be shown **/
    var left = $(targ).position().left;
    $(".p_horizontal_wrap").animate({
        scrollLeft: left
    });
});