javascript - 页面加载时内联 Javascript 淡入淡出

Question

Javascript新手并尽我所能，但尽管进行了广泛的搜索，但仍无法解决问题。

尝试使用内联脚本 (XHTML) 在页面加载时使项目淡入。我很想使用外部，但不能给出软件限制。这是我到目前为止开发的代码......

<script type='text/javascript'>
$(document).ready(function() {
    $('#evan').fadeIn('slow');
});
</script>
<div id='evan' style='position:absolute;left:-200px;top:40%;width:80px;height:80px;background-color:red;'></div>

虽然该框确实出现了，但它并没有淡入淡出，所以我假设 Javascript 没有正确编写。

您能提供的任何帮助将不胜感激。谢谢。

Answer 1

我认为 fadeIn 必须首先隐藏该项目，并且您的元素位置（左：-200px）不在视口内。

<script type='text/javascript'>
$(document).ready(function() {
    $('#evan').fadeIn('slow');
});
</script>
<div id='evan' style='position:absolute;top:40%;width:80px;height:80px;background-color:red;display:none'>Some content</div>

演示：小提琴