JQuery交互式图库

Question

我正在尝试创建一个包含垂直定位的四个图像的图库，当单击时向右移动300px，然后再次单击时将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);
    });     

});