0

我设法将一段代码放在一起，根据某些条件为容器 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");
    }
});
4

3 回答 3

1

您要声明width三遍，这将在以后引起您的问题。您可以在作用域单击事件中将其减少为一个变量并重命名它，这样它就不会干扰with外部作用域中的声明。

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

那么这个条件就很奇怪了：

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

而不是!pos.left <= 0你可以做的pos.left > 0。

于 2012-04-24T21:25:27.020 回答
0

试试外宽？可能解决一些数学问题

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

于 2012-04-24T21:24:01.097 回答
0

你有两件事同时发生。您正在将项目从后面移动到前面，等等，并且您正在制作动画。当您进行从前到后的移动时，您的所有图像都会移动。300px最重要的是，当您的li元素的边距为时，您只能通过 制作动画5px，这是160px1 张图像的总和。（两人 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/

于 2012-04-24T21:52:30.867 回答