页面加载时如何滑出元素？

Question

这是悬停http://jsfiddle.net/MK87R/1/的一个例子

我想在页面加载时滑动而不是悬停。我该怎么做呢？注意，我更喜欢反应解决方案。但是，CSS / HTML解决方案也不错。

以下是一些示例代码：

<div id="slideout">
  <img src="http://eduardovalencia.com/wp-content/uploads/2011/03/FEEDBACK-LOGO-PURPLE.jpg" alt="Feedback" />
  <div id="slideout_inner">
    Hi Welcome to Stack Overflow
  </div>
</div>

CSS：

#slideout {
    position: fixed;
    top: 40px;
    left: 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout_inner {
    position: fixed;
    top: 40px;
    left: -250px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#slideout:hover {
    left: 250px;
}

#slideout:hover #slideout_inner {
    left: 0;
}

img {
    width: 100px;
    height: 100px;
}

Answer 1

这是一个使用JQuery及其.animate（）方法的解决方案。

http://jsfiddle.net/MK87R/510/

$('#slideout_inner').animate({left: 0});