0

スタック オーバーフローのおかげで、このスクリプトをうまく機能させることができました。

var $count = 4;
var $row = 10;

function across() {
    var $active = $('#slideshow .active .current');
    var $next = $active.next();

    $next.addClass('current');
    $active.animate({ left: '+=100px' }, 800, 'swing').removeClass('current');
    $row += 10;
    $count--;

    if ($count == 0) { 
        $count = 4;
        $row = 10;
        down();
        $($active).stop();
        $('#slideshow .active .bed').animate({ left: '-=100px' }, 1);
        $('.div .bed:first-child').addClass('current');

    }
}
function down() {
    var $active = $('#slideshow .active');
    var $next = $active.next();

    $next.fadeIn("slow").addClass('active');
    $active.fadeOut("slow").removeClass('active');

    if (!$next.length) {
        $("#slideshow .div:first-child").fadeIn("slow").addClass('active');
    }
}
$(function() {
  setInterval(across, 1000);
});

http://jsfiddle.net/QSfgG/30/

しかし問題がある。

緑色の親正方形では、オレンジ、紫、灰色の div が右にスライドしますが、他の正方形では、div はほとんど左にスライドしません。

これは、スクリプトの 16 行目の down() 関数と関係があります。それが取り除かれると、すべての div が同じ量でスライドします。ただし、前に呼び出す必要があるため、down() を除外することはできません。

$('#slideshow .active .bed').animate({ left: '-=100px' }, 1);
$('.div .bed:first-child').addClass('current');

18 行目と 19 行目。これは、div が元の位置に戻るのをユーザーが見ないようにするためです。明確にするために、オレンジ、パープル、グレーの div を同じ量だけスライドさせる必要があります。また、div が元の位置に戻るのをユーザーが確認する前に、親 div をフェードアウトさせる必要があります。

御時間ありがとうございます！

4

1 に答える 1

1

初めて（緑）ベッドが左に-20pxあるため、+ = 100pxで右に100px移動し、次にアクティブなdivを次のdivに変更し、その直後にベッドを- = 100pxに移動すると、それらのベッドは-20px、左に 120px 移動し、+100 で左に -20px 移動します。

$('#slideshow .active .bed').animate({ left: '-=100px' }, 1); を入れた場合 down() 呼び出しのすぐ上で修正できます (上の $($active).stop() 呼び出しも移動したい場合があります)。

http://jsfiddle.net/QSfgG/35/

if ($count == 0) { 
    $count = 4;
    $row = 10;
    $('#slideshow .active .bed').animate({ left: '-=100px' }, 1);
    down();
    $($active).stop();
    $('.div .bed:first-child').addClass('current');
}
于 2013-02-25T01:26:28.990 に答える