Javascript 使用jquery将图像水平移动到左侧

我有一个简单的html页面，在div工具栏中有3个图像。图像放置在工具栏右端的位置。单击任何图像时，我想将其移动到左端。其余2张图片在最右边

这是我的html

<div id="toolbar" align="right">
    <img id="home" src="home.png" alt="image"/>
    <img id="learn" src="learn.png" alt="image"/>
    <img id="gallery" src="gallery.png" alt="image"/>       
</div>

以下是我在参考了彼得和阿卜杜拉的答案后得到的信息

 $('#toolbar img').click(function(e){
  if(e.target.id=="home")
      {
        $("#home").css({'float':'left','margin':'0px'});
        $("#learn").css({'float':'right','margin':'0px'});
        $("#gallery").css({'float':'right','margin':'0px'});
      }
  if(e.target.id=="learn")
  {
    $("#home").css({'float':'right','margin':'0px'});
    $("#learn").css({'float':'left','margin':'0px'});
    $("#gallery").css({'float':'right','margin':'0px'});
  }
  if(e.target.id=="gallery")
  {
    $("#home").css({'float':'right','margin':'0px'});
    $("#learn").css({'float':'right','margin':'0px'});
    $("#gallery").css({'float':'left','margin':'0px'});
  }
});

---

但是这些工作没有任何动画，上面代码中的一些幻灯片或移动动画几乎没有帮助。谢谢：）

您可以使用jQuery的

animate（）

函数设置CSS代码更改的动画。这包括位置、不透明度、颜色等的变化

---

嗨，伙计，试试这个，这个会

$('#toolbar img').click(function(e){
   $(e.target).css({'float':'left','margin':'5px'});
});

---

我知道你已经标记了一个作为答案，但这里有一个脚本和css一起做同样的事情，但与动画

---

谢谢：）看起来不错，稍微修改一下‘边距’：‘0px’就行了，但现在我还想让最左边的图像移回右端，只要点击了其他图像。看看修改后的代码，我就解决了。需要更多的帮助。Joakim完全回答了我的问题。所以我把他标记为正确答案，仍然感谢：）哦！谢谢太好了，这个很好用。我想我应该把它给你。

$('#toolbar img').click(function(e){
   $(e.target).css({'float':'left','margin':'5px'});
});

#toolbar{
    position: relative;
    text-align:right;
    margin: 0 auto;
    width: 1257px;
    height: 60px;
    border:1px solid #000000;
}

#toolbar img{
    position:absolute;
}

    var movedImg;
positionImages();
function positionImages(){
    var rightPos = 0;
    $("#toolbar img").each(function(){
        $(this).css("right", rightPos);
        rightPos += $(this).width() + 5;
    });
}

$("#toolbar img").click(function() {
    if(movedImg){
        var rightPos = parseInt($(this).css("right"));
        movedImg.animate({"right" : rightPos}, "slow");
    }
    $(this).css("left","0");
    $(this).animate({"right" : "+=100%"}, "slow");
    movedImg = $(this);
});