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

问题描述：

我需要为2个不同的html元素创建幻灯片效果，但此动画必须同时运行。如何使用jquery同时动画2个不同的html元素？

有jquery.animate（）函数的方法吗？

是有，但尽量解释它到底是什么你正在尝试做的，张贴一些代码或设置好[的jsfiddle（HTTP：//的jsfiddle） – adeneo 2012-07-30 09:00:11

答

在这里，我已经做了完整的档，显示了我们如何可以动画使用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" />

CSS：

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; 
}

JQuery的：

$(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(); 
    }); 

});

演示：http://codebins.com/bin/4ldqp9a

对，谢谢，这是工作 – realtebo 2012-08-01 10:37:43

答

我只是试图移动一个div并同时移动的IMG

我忘记两个.animate（）一个其他的同意自动运行后。

遗憾的失去的时间...

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

相关推荐