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"); } });
Comments
Post a Comment