CODEWITHSUNDEEP
javascripthtmlcss
Caspar
Caspar

Reputation: 169

Creating multiple instances of the same id

I have a question I can't seem to figure out myself.

Say I have created a paragraph that says "+1". When I click a button that already exists in my code, I can make this paragraph appear above the button and I can transform it so that it's 'y' increases and it moves up while fading slowly.

So, you click the button, a +1 appears above and moves up while fading.

How do I make it so I can create a new instance of this +1 without removing the first one if I click the button before the first one has a chance to disappear?

So, if I clicked the button really fast, a stream of +1's would appear above the button and slowly fade out, one by one. Any idea of how I would go about doing this?

Thank you!!

Upvotes: 2

Views: 420

Answers (1)

shipshape
shipshape

Reputation: 1742

Here's a solution using jQuery:

$('button').on('click', function() {
  var $newPlus = $('<div class="plus">+1</div>');
	$('#area').append($newPlus);
  setTimeout(function(){ $newPlus.addClass('fade'); }, 50);
  setTimeout(function(){ $newPlus.remove(); }, 650);
});
#area {
  position: relative;
  padding: 70px;
}
#area .plus {
  position: absolute;
  left: 100px;
  top: 50px;
  opacity: 1;
  transition: top 300ms ease-out, opacity 600ms ease-in-out;
}
#area .plus.fade {
  top: 0px;
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="area">
  <button>Plus One</button>
</div>

Upvotes: 1

Related Questions