我正在尝试在加载时制作 div 幻灯片，但我以前的解决方案不再有效

Question

我昨天发布了这个，代码有效，但今天它不是。我似乎无法让我的 javascript 启动并显示div 的动画？有什么想法吗？

我将js放在一个单独的文件中，并使用脚本标签从正文中触发它。

function slideOnLoad(){
  document.getElementById("right-scroll-slide").style.top="10px";
}
slideOnLoad();

#right-scroll-slide{
  -webkit-transition:all 1s;
  -ms-transition:all 1s;
  -moz-transition:all 1s;
  -o-transition:all 1s;
    position:absolute;
  top:-100px;
  background:red;
}

<div class="right-scroll-content" id="right-scroll-slide">aaaa</div>

我会包含一个 jsfiddle，但它现在似乎没有加载。

Answer 1

在 css 中使用动画并将top更改为margin-top

演示

http://codepen.io/anon/pen/Kwzqvq

Jquery

 function slideOnLoad(){
      $('#right-scroll-slide').animate({'margin-top':'0px'},0) 
    }
    slideOnLoad();

CSS

 #right-scroll-slide{
      -webkit-transition:all 1s;
      -ms-transition:all 1s;
      -moz-transition:all 1s;
      -o-transition:all 1s;
        position:absolute;
      margin-top:-100px;
      background:red;
    }

Answer 2

function slideOnLoad(){
  document.getElementById("right-scroll-slide").style.top="0px";
}
slideOnLoad();

#right-scroll-slide{
  -webkit-transition:all 1s;
  -ms-transition:all 1s;
  -moz-transition:all 1s;
  -o-transition:all 1s;
    position:absolute;
  top:-100px;
  background:red;
  display:block
}

<div class="right-scroll-content" id="right-scroll-slide">aaaa</div>