I have a simple html page with 3 images inside a div toolbar. Where the image is placed on the right end of the toolbar. When clicked on any of the image I want to move it to the left end. Rest 2 of the images to the extreme right.

Here is my 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>

Here is my css

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

Here is what I got after referring the answers from Pieter and abdullah

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

but these work without any animation, little help with some slide or move animation in the above code. Thanks :)

I have a simple html page with 3 images inside a div toolbar. Where the image is placed on the right end of the toolbar. When clicked on any of the image I want to move it to the left end. Rest 2 of the images to the extreme right.

Here is my 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>

Here is my css

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

Here is what I got after referring the answers from Pieter and abdullah

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

but these work without any animation, little help with some slide or move animation in the above code. Thanks :)

• javascript
• jquery

3 Answers 3

I know that you have marked one as answer but here is a script along with css to do the same thing but with animation

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

You can animate changes to CSS code by using jQuery's animate() function. This includes changes in position, opacity, color, etc.

http://api.jquery./animate/

HI mate, Try this, this will

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