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

Question

我有一个简单的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>

这是我的CSS

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

这是我参考彼得和阿卜杜拉的答案后得到的

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

但这些方法不需要任何动画，在上述代码中对幻灯片或移动动画的帮助很小。 谢谢 ：）

Answer 1

您可以使用jQuery的animate()函数来动画化CSS代码。 这包括位置，不透明度，颜色等的更改。

http://api.jquery.com/animate/

Answer 2

嗨，朋友，试试这个，这会

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

Answer 3

我知道您已经将一个标记为答案，但这是一个脚本和CSS一起做同样的事情，但带有动画

编辑：这是一个jsfiddle链接，其中包含正在执行的代码

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