使用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

我知道你有一个标记为答案，但这里是一个脚本与CSS一起做同样的事情，但与动画

edit: here is a jsfiddle link with the code in action

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

Answer 2

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

Answer 3

HI队友，试试这个，这将

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