使用JS动画功能在div中滑动

Question

我建立了类似通知框的盒子。 现在，我想从左侧轻柔地滑动它们，而不仅仅是淡入淡出。

现在，我必须使用.animate而不是.fadeIn来执行此操作。

我将尝试使用的动画代码是（不知道，是否可行）：

animate(
    document.getElementByClassName('notification'),
    "margin-left","px",50,0,200;
    "opacity",0,1,200;
);

但！ 我不知道如何将其集成到功能中:(

这是我的JS：

var myVar;

function showDiv() {
  var random = Math.floor(Math.random() * $('.notification').length);
  $('.notification').eq(random).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200);
  createRandomInterval();
}

function createRandomInterval() {
  setTimeout(showDiv, 500 + Math.random() * 4000);
}
$(document).ready(function() {
  createRandomInterval();
});

这是我完整的小提琴： https : //jsfiddle.net/brapbg1h/

Answer 1

这就是我将使用animate来获得预期结果的方式，基本上是将.hide（）替换为animate函数

function showDiv() {
  var random = Math.floor(Math.random() * $('.notification').length);
  $('.notification').eq(random).prependTo('.container').fadeIn(200).delay(3000).animate({
    opacity: 0,
    marginLeft: '-200px'
  }, 'slow', 'linear');
  createRandomInterval();
}

更新的小提琴