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 回答