javascript - I have two click twice again to fire jquery animation function -

here fiddle

last time purely javascript problem won't post html. user said had set html "data-clicks" after refining code , adding "else" clause, have click twice again. here's link last post. html same. don't quite understand "data-clicks", did research still don't quite understand it.

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");   }  });