CODEWITHSUNDEEP
jquery
rnDesto
rnDesto

Reputation: 259

how to add 2 classes with delay in jquery

I trying to create animation with jquery. When I click yellow box it will move to center container(.radius), after that the box will change as container width(remove .radius add .full). is that posible to adding 2 classes in single event with jquery? or is there any otherway to do it? thank you

$(document).ready(function(){
  var go = $('.expand');

  function erase(){
    $(go).removeClass('radius');
    //$(go).addClass('full');
  }
  $(go).on('click', function(){
    $(this).addClass('radius').delay(500, erase);
  });

});
.boxContainer {
  position: relative;
  overflow: hidden;
  width: 1170px;
  height: 800px;
  border: 3px solid #cecece;
  margin: 0 auto;
  padding: 0 15px;
}

.expand {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 50px;
  height: 50px;
  background-color: yellow;
  cursor: pointer;
  transition: 300ms all ease-in-out;
}

.radius {
  top: 50%;
  left: 50%;
}

.full{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxContainer">
  <div class="expand">
  </div>
</div>

Upvotes: 1

Views: 155

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

To achieve what you need you can use setTimeout() to delay amending the classes for 500ms. Try this:

var $go = $('.expand');

$go.on('click', function() {
  $(this).addClass('radius')
  setTimeout(function() {
    $go.removeClass('radius').addClass('full');
  }, 500);
});

That being said, a much better solution would be to do it all in CSS by using keyframes:

$('.expand').on('click', function() {
  $(this).addClass('animate')
});
.boxContainer {
  position: relative;
  overflow: hidden;
  width: 1170px;
  height: 800px;
  border: 3px solid #cecece;
  margin: 0 auto;
  padding: 0 15px;
}

.expand {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 50px;
  height: 50px;
  background-color: yellow;
  cursor: pointer;
  transition: 300ms all ease-in-out;
}

@keyframes expand {
  50% {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
  }
  100% {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}

.animate {
  animation: expand 1s forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxContainer">
  <div class="expand"></div>
</div>

Upvotes: 3

Related Questions