Блог

У меня есть простая HTML-страница с 3 изображениями внутри панели инструментов div. Где изображение размещается в правом конце панели инструментов. При нажатии на любое изображение я хочу переместить его в левый конец. Остальные 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'});
  }
});
  

но они работают без какой-либо анимации, мало помогают с некоторыми слайдами или анимацией перемещения в приведенном выше коде. Спасибо 🙂

Я знаю, что вы отметили его как ответ, но вот скрипт вместе с 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);
});
  

Вы можете анимировать изменения в CSS-коде с помощью animate() функции jQuery. Это включает в себя изменения положения, непрозрачности, цвета и т.д.

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

ПРИВЕТ, приятель, попробуй это, это поможет

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