Jquery-On click changing loop

Question

I have this script that on click fades an element, changes css and unfades it. I want that on the second click it would do the same but change to some other css. I want it to do this in a some kind of loop. And also can I make this in less code? Sorry if it's an easy question, I'm new at js.

<script>
  $(function() {
  $("#banner").click(function() {
  $("#banner").fadeOut("fast", function() {
  $("#banner").css({top:"0", left:"0"});
  }).fadeIn("slow");
  });
  });
</script>

Diodeus - James MacFarlane · Accepted Answer · 2013-09-18 15:40:28Z

1

You need some sort of indicator that the script has already run. You can do this by adding a class name and checking for it.

$(function() {
  $("#banner").click(function() {
      if($("#banner").hasClass('done')) {
          // your new code
      }
      $("#banner").addClass('done');
      $("#banner").fadeOut("fast", function() {
        $("#banner").css({top:"0", left:"0"});
      }).fadeIn("slow");
  });
});

answered Sep 18, 2013 at 15:40

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Darren Crabb Over a year ago

not forgetting of course that if you want this to loop as indicated you'd have to use .removeClass in the bit within the if statement and add an else for the remaining code, otherwise it's just a one way trip.

Collectives™ on Stack Overflow

Jquery-On click changing loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related