Question

我试图使用css附加一个带滑动效果的新div。我找到了一种使用关键帧的方法，但我确信有更简单的方法来实现这一点。另外，我想把我的新div放在其他div旁边，而不是按钮，但我也有问题。如果有人能帮我一把，那将不胜感激。

＆＃13;

$('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>');
});

＆＃13;

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%;
  }
}

＆＃13;

<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>

＆＃13;

同样，我试图避免使用关键帧的东西，因为我还没有完全明白这一点，并希望以更简单的方式实现这一点。

先谢谢!!

Answer 1

我认为你需要的是jQuery UI。除此之外还有一些很好的幻灯片效果。

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

希望这有帮助

Answer 2

＆＃13;

$('.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);

});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

附加具有幻灯片效果的div

2 个答案: