Question

我设法将一段代码放在一起，根据某些条件动画容器div内的div - 但是我的数学必须略微偏离，因为它的动画稍微偏向左边。参见示例@ http://dev.whiteb0x.com/gallery

var width = $('#nav').width();
$('#nav').width(width * 2 + 20);

$(".nav-next").click(function () {
    var pos = $('#nav').position();
    var width = $('#nav-viewport').width();
    var width = width * (-1);
    alert(width);
    if (pos.left <= 0 && pos.left > width && !$('#nav').is(':animated')) {
        $('#nav li:first').before($('#nav li:last'));
        $("#nav").animate({"left": "-=300"}, "slow");
    }
});

$(".nav-prev").click(function () {
    var pos = $('#nav').position();
    if (!pos.left <= 0 && !$('#nav').is(':animated')) {
        $('#nav li:first').before($('#nav li:last'));
        $("#nav").animate({"left": "+=300"}, "slow");
    }
});

Answer 1

您宣布width三次，这将导致您以后遇到问题。您可以将其缩减为作用域单击事件中的一个变量，并将其重命名，以使其不会干扰外部作用域中声明的with。

var _width = - ($('#nav-viewport').width());

然后这种情况太奇怪了：

if (!pos.left <= 0 && !$('#nav').is(':animated'))

而不是!pos.left <= 0，您可以pos.left > 0。

Answer 2

尝试outterWidth？可能要解决一些数学问题

http://api.jquery.com/outerWidth/

Answer 3

你有两件事同时发生。您正在将项目从后面移动到前面等，并且您正在制作动画。当您进行前后移动时，所有图像都会移动。最重要的是，当300px元素的边距为li时，您只需按5px制作动画，这对于1张图片总共为160px。（两个320，但我认为你不想这样）：

var width = $('#nav').width();
$('#nav').width(width * 2 + 20);

$("#nav").css({
    left: $('#nav').position().left - 160 + 'px' // Give a 1 image "buffer" for shifting left
});

$(".nav-next").click(function() {
    var pos = $('#nav').position();
    if (!$('#nav').is(':animated')) {
        $('#nav li:first').insertAfter($('#nav li:last'));
        $("#nav").css({
            left: pos.left + 160 + 'px'  // Move because we reordered images
        }).animate({
            "left": pos.left
        }, "slow"); // Shift back
    }
});

$(".nav-prev").click(function() {
    var pos = $('#nav').position();
    if (!$('#nav').is(':animated')) {
        $('#nav li:last').insertBefore($('#nav li:first'));
        $("#nav").css({
            left: pos.left - 160 + 'px'  // Move because we reordered images
        }).animate({
            "left": pos.left
        }, "slow"); // Shift back
    }
});

演示：http://jsfiddle.net/jtbowden/GFx7h/1/

jquery animate div左/右条件

3 个答案: