CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ckim16
ckim16

Reputation: 1749

Append a div with slide effect

I'm trying to append a new div with slide effect using css. I found a way that works using keyframe.

I'm trying to avoid using keyframe because I don't quite understand that yet and want to achieve this with a simpler way.

Also, I want to position my new div next to other div, not the button but I'm having problem as well.

How could I do this?

$('div:first-child').click(function() {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
  } else {
    $(this).addClass('active');
  }
});

$('button').click(function() {
  $('body').append('<div class="slide">7</div>');
});
div {
  display: inline-block;
}
button {
  position: relative;
}
.active {
  font-size: 25px;
}
div:nth-child(2):active {
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -webkit-transition: -webkit-transform 2s;
  transform: rotate(360deg);
  transition: transform 2s;
}
.slide {
  position: absolute;
  animation-duration: 3s;
  animation-name: slidein;
}
@keyframes slidein {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</body>
<button>button</button>

Upvotes: 2

Views: 1595

Answers (2)

Brad
Brad

Reputation: 8668

I think what you needs is jQuery UI. There are some great slide effects among other things.

http://api.jqueryui.com/effect/

Upvotes: 2

Sandeep
Sandeep

Reputation: 88

$('.slides div:first-child').click(function() {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
  } else {
    $(this).addClass('active');
  }
});

$('button').click(function() {
  var $div = $("<div/>",{"class":"slide","text":"7"});
  $('.slides').append($div);
 
  $div.css({ left : '700px', opacity : 0 });
  $div.animate({
      'left' : 0,
      'opacity' : 1
  },1000);

});
div {
  display: inline-block;
}
button {
  position: relative;
}
.active {
  font-size: 25px;
}
.slides div:nth-child(2):active {
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -webkit-transition: -webkit-transform 2s;
  transform: rotate(360deg);
  transition: transform 2s;
}
.slide {
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="slides">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
  </div>
  <button>button</button>
</body>

Upvotes: 1

Related Questions