使用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'}); 
});