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

問題はこの行にあります：

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

基本的に、leftすべて.bedを-120pxに変更します（画面から完全に移動します）。

一意のクラスを追加してアニメーション化し、カウント後に削除することをお勧めします。次に例を示します。

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

function across() {
    var $active = $('#slideshow .active .current');
    var $next = $active.next();
    $active.addClass('move'); //add class

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

    if ($count == 0) { 
        $count = 4;
        $row = 10;
        down();
        $($active).stop();
        $('.move').animate({ left: '-=100px' }, 1); //animate class
        $('.div .bed:first-child').addClass('current');
        $('.move').removeClass('move'); //remove class
    }
}
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/dirtyd77/QSfgG/42/

ただし、配列を使用してそれを実行することもできます。

var $count = 4;
var $row = 10;
var $divs =[]; //make array to hold "beds"

function across() {
    var $active = $('#slideshow .active .current');
    var $next = $active.next();
    $divs.push($active); //push active "bed"

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

    if ($count == 0) { 
        $count = 4;
        $row = 10;
        down();
        $($active).stop();
        for(var a = 0; a < $divs.length; a++){
         $($divs[a]).animate({ left: '-=100px' }, 1) //move each "bed" in array 100px
        }
        $divs=[]; //reset array
        $('.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/dirtyd77/QSfgG/40/

于 2013-02-25T15:36:52.307 に答える