Question

我有一列盒子。单击单个框时，会发生切换动画和背景颜色。我怎么能得到其他元素（如关闭按钮）来动画所有框回到默认位置？ JS我正在使用的是下面的内容。

var $boxes = $(".box").click(function () {
    var $this = $(this),
        left = parseFloat($this.css('left')) || 0;
    if (left == 0) {
        $this.stop(true).animate({left: "100px"}).css('background','blue');

        $boxes.not(this).stop(true).animate({left: 0}).css('background','red');

    } else {
        $this.stop(true).animate({left: 0});

Answer 1

你已经有了代码：

$(".close").click(function() {
    $boxes.stop(true).animate({left: 0}).css('background','red');
});

清理了一下：

var $boxes = $(".box");

$boxes.click(function () {
    var $this = $(this),
        left = parseFloat($this.css('left')) || 0;
    if (left == 0) {
        $this.stop(true).animate({left: "100px"}).css('background','blue');

        $boxes.not(this).stop(true).animate({left: 0}).css('background','red');

    } else {
        $this.stop(true).animate({left: 0});
        $this.css('background','green');
    }
});

$(".close").click(function() {
    $boxes.stop(true).animate({left: 0}).css('background','red');
});

Fiddle

Answer 2

亚历克斯击败了我，但我会说制作一个功能并使用＆＃34;每个＆＃34;在每个盒子上调用函数：

var $boxes = $(".box").click(function () {
    var $this = $(this),
        left = parseFloat($this.css('left')) || 0;
    if (left == 0) {
        $this.stop(true).animate({left: "100px"}).css('background','blue');

        $boxes.not(this).stop(true).animate({left: 0}).css('background','red');

    } else {
        MoveLeft();
    }
});

function MoveLeft() {
        $(this).stop(true).animate({left: 0});
        $(this).css('background','green');
}

$(".close").click(function () {
    $boxes.each(MoveLeft);
});

更新：

更正了链接，小提琴：http://jsfiddle.net/SgDwn/62/

如何使元素从另一个不是$ this的元素移动

2 个答案: