javascript - JQuery 互动画廊

Question

我正在尝试创建一个包含四个图像的画廊，垂直放置，单击时向右移动 300 像素，然后再次单击时将 300 像素移回原始位置。到目前为止，这是我的代码：

$(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

现场演示

jQuery(function($) {

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

});