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

3回宣言しwidthているため、後で問題が発生します。withスコープ クリック イベントで 1 つの変数に減らし、名前を変更して、外側のスコープで宣言されたものに干渉しないようにすることができます。

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

同時に2つのことが起こっています。アイテムを後ろから前などに移動し、アニメートしています。前後に移動すると、すべての画像がシフトします。その上、要素のマージンが、 1つの画像の合計である300px場合にのみ、アニメーションを作成します。（2人で320人ですが、あなたはそれを望んでいないと思います）：li5px160px

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 に答える
0

outterWidth を試してみませんか？数学のいくつかを解決する可能性が高い

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

于 2012-04-24T21:24:01.097 に答える