Question

感谢堆栈溢出的一些帮助，我设法让这个脚本运行得非常好：

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行。这样用户就不会看到divs回到原来的位置。为了澄清，我需要橙色，紫色和灰色divs以相同的数量滑动，我需要在用户看到divs回到原始位置之前淡出父div。

谢谢你的时间！

Answer 1

第一次（绿色）床位于-20px左侧，所以你的+ = 100px将它们向右移动100px，然后你将活动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');
}

导致这种情况变化的原因是什么？

1 个答案: