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

谢谢你的时间！

Answer 1

问题出在这一行：

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

基本上，您要将所有left的{{1}}更改为-120px（完全将其移出屏幕）。

我建议添加一个唯一的类，为其设置动画，然后在计数后将其删除。这是一个例子：

.bed

样本： http://jsfiddle.net/dirtyd77/QSfgG/42/

但是，您也可以使用数组来解决它。

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/40/

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

1 个答案: