如何同时使用jquery设置两个不同html元素的动画？

我需要为两个不同的html元素创建一个幻灯片效果，但是这个动画必须同时运行

---

有没有办法使用jquery.animate（）函数？

我只是想移动一个div，同时移动一个IMG

我忘了两个.animate（）一个接一个自动并发运行

---

抱歉耽误了时间…

这里我已经完成了完整的bins，它展示了如何使用jQuery为两个不同的HTML元素制作动画。演示链接如下：

演示：

HTML:

<div id="panel1" class="edge">
  <div class="box" style="top:30; background:#f8a2a4;">
  </div>
</div>
<div id="panel2" class="edge">
  <div class="box" style="top:120; background:#5599fd;">
  </div>
</div>
<br/>
<input type="button" id="btn1" value="Animate Block1" />
<input type="button" id="btn2" value="Animate Block2" />
<input type="button" id="btn3" value="Animate Both" />

body{
  background:#ffffef;
}
.edge{
  width:500px;
  height:70px;
  border:1px solid #3377af;
  padding:5px;
  margin-top:10px;
}
.box{
  position:absolute;
  left:10;
  width:40px;
  height:40px;
  border:1px solid #a82244;
}

$(function() {
    $("#btn1").click(function() {
        var move = "";
        if ($(".box", $("#panel1")).css('left') == "10px") {
            move = "+=" + ($("#panel1").width() - 35);
        } else {
            move = "-=" + ($("#panel1").width() - 35);
        }
        $(".box", $("#panel1")).animate({
            left: move
        }, 500, function() {
            if ($(this).css('left') == "475px") {
                $(this).css('background', '#afa799');
            } else {
                $(this).css('background', '#f8a2a4');
            }

        });
    });

    $("#btn2").click(function() {
        var move = "";
        if ($(".box", $("#panel2")).css('left') == "10px") {
            move = "+=" + ($("#panel2").width() - 35);
        } else {
            move = "-=" + ($("#panel2").width() - 35);
        }
        $(".box", $("#panel2")).animate({
            left: move
        }, 500, function() {
            if ($(this).css('left') == "475px") {
                $(this).css('background', '#afa799');
            } else {
                $(this).css('background', '#5599fd');
            }

        });
    });
    //Call Event Con-currently for both blocks
    $("#btn3").click(function() {
        $("#btn1").add("#btn2").click();
    });

});

JQuery:

<div id="panel1" class="edge">
  <div class="box" style="top:30; background:#f8a2a4;">
  </div>
</div>
<div id="panel2" class="edge">
  <div class="box" style="top:120; background:#5599fd;">
  </div>
</div>
<br/>
<input type="button" id="btn1" value="Animate Block1" />
<input type="button" id="btn2" value="Animate Block2" />
<input type="button" id="btn3" value="Animate Both" />

body{
  background:#ffffef;
}
.edge{
  width:500px;
  height:70px;
  border:1px solid #3377af;
  padding:5px;
  margin-top:10px;
}
.box{
  position:absolute;
  left:10;
  width:40px;
  height:40px;
  border:1px solid #a82244;
}

$(function() {
    $("#btn1").click(function() {
        var move = "";
        if ($(".box", $("#panel1")).css('left') == "10px") {
            move = "+=" + ($("#panel1").width() - 35);
        } else {
            move = "-=" + ($("#panel1").width() - 35);
        }
        $(".box", $("#panel1")).animate({
            left: move
        }, 500, function() {
            if ($(this).css('left') == "475px") {
                $(this).css('background', '#afa799');
            } else {
                $(this).css('background', '#f8a2a4');
            }

        });
    });

    $("#btn2").click(function() {
        var move = "";
        if ($(".box", $("#panel2")).css('left') == "10px") {
            move = "+=" + ($("#panel2").width() - 35);
        } else {
            move = "-=" + ($("#panel2").width() - 35);
        }
        $(".box", $("#panel2")).animate({
            left: move
        }, 500, function() {
            if ($(this).css('left') == "475px") {
                $(this).css('background', '#afa799');
            } else {
                $(this).css('background', '#5599fd');
            }

        });
    });
    //Call Event Con-currently for both blocks
    $("#btn3").click(function() {
        $("#btn1").add("#btn2").click();
    });

});

---

演示：

是的，但请尝试更好地解释您的目标，发布一些代码或设置