javascript - JQuery インタラクティブ ギャラリー

Question

垂直に配置された 4 つの画像のギャラリーを作成しようとしています。クリックすると右に 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);
    });     

});