我再次点击两次以激活jquery动画功能

Question

以下是Fiddle

上次这纯粹是一个javascript问题所以我不会发布html。用户说我必须设置html＆＃34;数据点击＆＃34;但在完善我的代码并添加另一个＆＃34; else＆＃34;条款，我现在必须再次点击两次。这是link到最后一篇文章。 html是一样的。我不太了解＆＃34;数据点击＆＃34;，我做了一些研究，但仍然不太了解它。

的Javascript

$(document).ready(function(){
$('#three').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
     $("#three").animate({marginLeft: $(window).width()-900 +'px'}, 746, 'linear');
     $("#three-info").css("visibility" , "visible");
     $("#ignore-three").css("visibility" , "visible");
     $("#ignore-three").fadeIn(3000);
  } else {
      if ($("#three").css("marginLeft")=='0px') {
          $("#ignore-three").css("visibility" , "visible");
          $("#ignore-three").fadeIn(3000);
          }
     else {
         $("#three").animate({marginLeft: 0 +'px'}, 700, 'linear');
         $("#ignore-three").css("visibility" , "hidden");
     };
  }
  $(this).data("clicks", !clicks);
   if ($("#two").css("marginLeft")==$(window).width()-900 +'px') {
     $("#ignore-three").css("visibility" , "visible");
     $("#two").animate({marginLeft: 0 +'px'}, 63, 'linear');
     $("#three").animate({marginLeft: $(window).width()-900 +'px'}, 746, 'linear');
     $("#ignore-two").css("visibility" , "hidden");
  }
  if ($("#one").css("marginLeft")==$(window).width()-900 +'px') {
     $("#one").animate({marginLeft: 0 +'px'}, 63, 'linear');
     $("#three").animate({marginLeft: $(window).width()-900 +'px'}, 746, 'linear');
     $("#ignore-one").css("visibility" , "hidden");
  } 
});
$('#two').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
     $("#two").animate({marginLeft: $(window).width()-900 +'px'}, 746, 'linear');
     $("#two-info").css("visibility" , "visible");
     $("#ignore-two").css("visibility" , "visible");
  } else {
      if ($("#two").css("marginLeft")=='0px') {
          $("#ignore-two").css("visibility" , "visible");
          }
     else {
         $("#two").animate({marginLeft: 0 +'px'}, 700, 'linear');
         $("#ignore-two").css("visibility" , "hidden");
     };
  }
  $(this).data("clicks", !clicks);
  if ($("#three").css("marginLeft")==$(window).width()-900 +'px') {
     $("#ignore-two").css("visibility" , "visible");
     $("#three").animate({marginLeft: 0 +'px'}, 63, 'linear');
     $("#two").animate({marginLeft: $(window).width()-900 +'px'}, 746, 'linear');
     $("#ignore-three").css("visibility" , "hidden");
  }
  if ($("#one").css("marginLeft")==$(window).width()-900 +'px') {
     $("#one").animate({marginLeft: 0 +'px'}, 63, 'linear');
     $("#two").animate({marginLeft: $(window).width()-900 +'px'}, 746, 'linear');
     $("#ignore-one").css("visibility" , "hidden");
  }  
});
$('#one').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
     $("#one").animate({marginLeft: $(window).width()-900 +'px'}, 746, 'linear');
     $("#one-info").css("visibility" , "visible");
     $("#ignore-one").css("visibility" , "visible");
  } else {
      if ($("#one").css("marginLeft")=='0px') {
          $("#ignore-one").css("visibility" , "visible");
          }
     else {
         $("#one").animate({marginLeft: 0 +'px'}, 700, 'linear');
         $("#ignore-one").css("visibility" , "hidden");
     };
  }
  $(this).data("clicks", !clicks);
  if ($("#two").css("marginLeft")==$(window).width()-900 +'px') {
     $("#ignore-one").css("visibility" , "visible");
     $("#two").animate({marginLeft: 0 +'px'}, 63, 'linear');
     $("#one").animate({marginLeft: $(window).width()-900 +'px'}, 746, 'linear');
     $("#ignore-two").css("visibility" , "hidden");
  }
  if ($("#three").css("marginLeft")==$(window).width()-900 +'px') {
     $("#three").animate({marginLeft: 0 +'px'}, 63, 'linear');
     $("#one").animate({marginLeft: $(window).width()-900 +'px'}, 746, 'linear');
     $("#ignore-three").css("visibility" , "hidden");
  } 
});