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

我一直在玩你的JSFiddle。

这是你想要的吗？ http://jsfiddle.net/2cmNf/

我在＆＃39; next＆＃39;添加了if语句。用于测试#inner div的最后一项是否即将离开屏幕。

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. }

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

1 个答案: