jquery - 停止动态宽度 DIV 动画超过它的边缘

Question

我有一个 DIV，其中包含来自数据库的不同数量的项目。当单击下一个/上一个按钮时，我已将 DIV 设置为从当前位置动画加/减 894px。我现在正试图阻止它动画超过 0px 或超过它的最后一个孩子，但我正在努力让它在不使用固定宽度 DIV 的情况下工作。有谁知道解决方案？谢谢

http://jsfiddle.net/Drennan/mMMfn/

$('#right').each(
    function(){
        $(this).bind (
            "click",
            function(event){
                $('#inner').animate(
                    {left:"-=894px"}, {
                        duration:'slow',
                        easing:'swing'
                });
            }
        );
    }
);

$('#left').each(
    function(){
        $(this).bind (
            "click",
            function(event){
                $('#inner').animate(
                    {left:"+=894px"}, {
                        duration:'slow',
                        easing:'swing'
                });
            }
        );
    }
);



});

Answer 1

I've been playing around with your JSFiddle a bit.

Is this what you want it to do? http://jsfiddle.net/2cmNf/

I added an if statement to the 'next' function to test if the #inner div's last item was about to go off screen.

if ($('#inner').position().left + $('#inner').width() > 294) { //animate it to move left }

else { //do nothing, or maybe you could grey out the next button if there are no more items. Whatever you want. }