jquery - jquery使用运算符调整div大小问题

Question

我希望任何人都可以帮助我，

我有 3 个方块，我想在方块上使用动画，但使用“>”或“>”等运算符

但我不知道如何实现这一点，

on click 功能有效，但是如果您在第一个 div 进行动画制作时单击第二个 div，结果是两个 div 都会被展开，目的是当第一个 div 展开时另一个 div 不会，依此类推，试试看

    $(function () {
       $("#square1").on("click", function () {
        if ($("#square2").css('width') == '500px') {
            $("#square2").animate({
                width: "50"
            }, 1000);
            $("#square1").animate({
                width: "500"
            }, 1000);
        } else if ($("#square1").css('width') == '500px') {
            $("#square1").animate({
                width: "50"
            }, 1000);
        } else {
            $("#square1").animate({
                width: "500"
            }, 1000);
                }
            });
        });
$(function () {
    $("#square2").on("click", function () {
        if ($("#square1").css('width') == '500px') {
            $("#square1").animate({
                width: "50"
            }, 1000);
            $("#square2").animate({
                width: "500"
            }, 1000);
        } else if ($("#square2").css('width') == '500px') {
            $("#square2").animate({
                width: "50"
            }, 1000);
        } else {
            $("#square2").animate({
                width: "500"
            }, 1000);
        }
    });
});
$(function () {
    $("#vierkant").on("click", function () {
        if ($("#square1").css('width') == '500px') {
            $("#square1").animate({
                width: "50"
            }, 1000);
            $("#square2").animate({
                width: "50"
            }, 1000);
        }
    });
});

http://jsfiddle.net/c34Ha/

提前致谢

Answer 1

您可以通过添加来检查是否有任何 div 在动画另一个之前被动画

if (!$("#square1").is(':animated')) {
    // do stuff
}

http://jsfiddle.net/c34Ha/1/