Интерактивная галерея JQuery

Question

Я пытаюсь создать галерею из четырех изображений, расположенных вертикально, чтобы при щелчке переместить 300 пикселей вправо, а затем при повторном нажатии переместите 300px обратно в исходное место. Это мой код до сих пор:

$(document).ready(function(){ 
    $(".slidingimage ").click(function(){ 
     $(this).stop().animate({left:"300px"}, 2000);   
     $(".slidingimage").css("left");     
    });  
}); 

Этот код перемещает изображения вправо, но я не могу заставить их вернуться на прежнее место. Какие-либо предложения?

Answer 1

Попробуйте использовать функцию toggle:

$(".slidingimage").toggle(function(){ 
    $(".slidingimage").animate({left:300},600);}, 
function(){ 
    $(".slidingimage").animate({left:0},600); 
}); 

JSFiddle

Answer 2

LIVE DEMO

jQuery(function($) { 

    $(".slidingimage").click(function(){ 
     $(this).stop().animate({left: this.offsetLeft<150 ? 300 : 0 }, 2000); 
    });  

});